JavaScript: Comment passer objet par valeur?

• Lors de la transmission d'objets en tant que paramètres, JavaScript les transmet par référence et rend difficile la création de copies locales des objets.

  var o = {};
  (function(x){
      var obj = x;
      obj.foo = 'foo';
      obj.bar = 'bar';
  })(o)

  oaura .fooet .bar.

• Il est possible de contourner ce problème par le clonage; exemple simple:

  var o = {};
  
  function Clone(x) {
     for(p in x)
     this[p] = (typeof(x[p]) == 'object')? new Clone(x[p]) : x[p];
  }
  
  (function(x){
      var obj = new Clone(x);
      obj.foo = 'foo';
      obj.bar = 'bar';
  })(o)

  on'aura pas .fooou .bar.

Question

1. Existe-t-il un meilleur moyen de transmettre des objets par valeur, autre que de créer une copie / clonage locale?

Pas vraiment.

Selon ce dont vous avez réellement besoin, une possibilité peut être de définir ocomme prototype d'un nouvel objet.

var o = {};
(function(x){
    var obj = Object.create( x );
    obj.foo = 'foo';
    obj.bar = 'bar';
})(o);

alert( o.foo ); // undefined

Ainsi, toutes les propriétés que vous ajoutez objne seront pas ajoutées o. Toutes les propriétés ajoutées objavec le même nom de propriété qu'une propriété dans ol'ombre de la opropriété.

Bien sûr, toutes les propriétés ajoutées à oseront disponibles à partir de objsi elles ne sont pas masquées, et tous les objets qui ont odans la chaîne de prototypes verront les mêmes mises à jour de o.

De plus, si obja une propriété qui fait référence à un autre objet, comme un tableau, vous devez vous assurer de faire de l'ombre à cet objet avant d'ajouter des membres à l'objet, sinon, ces membres seront ajoutés objet partagés entre tous les objets ont objdans la chaîne de prototypes.

var o = {
    baz: []
};
(function(x){
    var obj = Object.create( x );

    obj.baz.push( 'new value' );

})(o);

alert( o.baz[0] );  // 'new_value'

Ici , vous pouvez voir que parce que vous ne l' avez pas l' ombre du tableau à bazsur oune bazpropriété sur objle o.baztableau se modifie.

Donc, à la place, vous devez d'abord l'observer:

var o = {
    baz: []
};
(function(x){
    var obj = Object.create( x );

    obj.baz = [];
    obj.baz.push( 'new value' );

})(o);

alert( o.baz[0] );  // undefined

Consultez cette réponse https://stackoverflow.com/a/5344074/746491 .

En bref, JSON.parse(JSON.stringify(obj))c'est un moyen rapide de copier vos objets, si vos objets peuvent être sérialisés en json.

Voici la fonction de clonage qui effectuera une copie complète de l'objet:

function clone(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;

    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);

    return temp;
}

Vous pouvez maintenant utiliser comme ceci:

(function(x){
    var obj = clone(x);
    obj.foo = 'foo';
    obj.bar = 'bar';
})(o)

Utilisation Object.assign()

Exemple:

var a = {some: object};
var b = new Object;
Object.assign(b, a);
// b now equals a, but not by association.

Un exemple plus propre qui fait la même chose:

var a = {some: object};
var b = Object.assign({}, a);
// Once again, b now equals a.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Vous êtes un peu confus sur le fonctionnement des objets en JavaScript. La référence de l'objet est la valeur de la variable. Il n'y a pas de valeur non sérialisée. Lorsque vous créez un objet, sa structure est stockée en mémoire et la variable à laquelle il a été affecté contient une référence à cette structure.

Même si ce que vous demandez était fourni dans une sorte de construction de langue native facile, il s'agirait encore techniquement de clonage.

JavaScript n'est en réalité qu'un passage par valeur ... c'est juste que la valeur transmise peut être une référence à quelque chose.

Utilisez ceci

x = Object.create(x1);

xet x1sera deux objets différents, le changement xne changera pasx1

Javascript passe toujours par valeur. Dans ce cas, il passe une copie de la référenceo dans la fonction anonyme. Le code utilise une copie de la référence mais il mute l'objet unique. Il n'y a aucun moyen de faire passer javascript par autre chose que la valeur.

Dans ce cas, vous souhaitez transmettre une copie de l'objet sous-jacent. Le clonage de l'objet est le seul recours. Votre méthode de clonage a cependant besoin d'un peu de mise à jour

function ShallowCopy(o) {
  var copy = Object.create(o);
  for (prop in o) {
    if (o.hasOwnProperty(prop)) {
      copy[prop] = o[prop];
    }
  }
  return copy;
}

Pour les utilisateurs de jQuery, il existe également un moyen de le faire de manière simple en utilisant le framework. Juste une autre façon jQuery nous facilite un peu la vie.

var oShallowCopy = jQuery.extend({}, o);
var oDeepCopy    = jQuery.extend(true, {}, o); 

références :

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• et de fouiller dans la source .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

En fait, Javascript est toujours passé par valeur . Mais comme les références d'objet sont des valeurs , les objets se comportent comme s'ils sont passés par référence .

Ainsi, afin de se promener ce, stringify l'objet et analyser en arrière, à la fois en utilisant JSON. Voir l'exemple de code ci-dessous:

var person = { Name: 'John', Age: '21', Gender: 'Male' };

var holder = JSON.stringify(person);
// value of holder is "{"Name":"John","Age":"21","Gender":"Male"}"
// note that holder is a new string object

var person_copy = JSON.parse(holder);
// value of person_copy is { Name: 'John', Age: '21', Gender: 'Male' };
// person and person_copy now have the same properties and data
// but are referencing two different objects

use obj2 = {... obj1} Les deux objets ont maintenant la même valeur et une référence différente

J'avais besoin de copier un objet par valeur (pas par référence) et j'ai trouvé cette page utile:

Quelle est la manière la plus efficace de cloner en profondeur un objet en JavaScript? . En particulier, cloner un objet avec le code suivant par John Resig:

//Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Avec la syntaxe ES6:

let obj = Object.assign({}, o);

En résumé, c'est juste un proxy sophistiqué trop compliqué, mais peut - être que Catch-All Proxies pourrait le faire?

var o = {
    a: 'a',
    b: 'b',
    func: function() { return 'func'; }
};

var proxy = Proxy.create(handlerMaker(o), o);

(function(x){
    var obj = x;
    console.log(x.a);
    console.log(x.b);
    obj.foo = 'foo';
    obj.bar = 'bar';
})(proxy);

console.log(o.foo);

function handlerMaker(obj) {
  return {
   getOwnPropertyDescriptor: function(name) {
     var desc = Object.getOwnPropertyDescriptor(obj, name);
     // a trapping proxy's properties must always be configurable
     if (desc !== undefined) { desc.configurable = true; }
     return desc;
   },
   getPropertyDescriptor:  function(name) {
     var desc = Object.getOwnPropertyDescriptor(obj, name); // not in ES5
     // a trapping proxy's properties must always be configurable
     if (desc !== undefined) { desc.configurable = true; }
     return desc;
   },
   getOwnPropertyNames: function() {
     return Object.getOwnPropertyNames(obj);
   },
   getPropertyNames: function() {
     return Object.getPropertyNames(obj);                // not in ES5
   },
   defineProperty: function(name, desc) {

   },
   delete:       function(name) { return delete obj[name]; },   
   fix:          function() {}
  };
}

Si vous utilisez lodash ou npm, utilisez la fonction de fusion de lodash pour copier en profondeur toutes les propriétés de l'objet dans un nouvel objet vide comme ceci:

var objectCopy = lodash.merge({}, originalObject);

https://lodash.com/docs#merge

https://www.npmjs.com/package/lodash.merge