JavaScript: come passare un oggetto per valore?

• Quando si passano oggetti come parametri, JavaScript li passa per riferimento e rende difficile creare copie locali degli oggetti.

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

  oavrà .fooe .bar.

• È possibile aggirare questo problema clonando; semplice esempio:

  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)

  onon avrà .fooo .bar.

Domanda

1. C'è un modo migliore per passare gli oggetti in base al valore, diverso dalla creazione di una copia / clone locale?

Non proprio.

A seconda di ciò di cui hai effettivamente bisogno, una possibilità potrebbe essere quella di impostare ocome prototipo di un nuovo oggetto.

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

alert( o.foo ); // undefined

Pertanto, tutte le proprietà a cui aggiungi objnon verranno aggiunte o. Qualsiasi proprietà aggiunta a objcon lo stesso nome di proprietà di una proprietà in oombreggerà la oproprietà.

Ovviamente, tutte le proprietà aggiunte osaranno disponibili objse non sono ombreggiate e tutti gli oggetti che hanno onella catena del prototipo vedranno gli stessi aggiornamenti a o.

Inoltre, se objha una proprietà che fa riferimento a un altro oggetto, come un Array, dovrai assicurarti di ombreggiare quell'oggetto prima di aggiungere membri all'oggetto, altrimenti quei membri verranno aggiunti obje saranno condivisi tra tutti gli oggetti che avere objnella catena dei prototipi.

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

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

})(o);

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

Qui puoi vedere che poiché non hai ombreggiato l'Array bazsu ocon una bazproprietà attiva obj, l' o.bazArray viene modificato.

Quindi, invece, dovresti prima ombreggiarlo:

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

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

})(o);

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

Dai un'occhiata a questa risposta https://stackoverflow.com/a/5344074/746491 .

In breve, JSON.parse(JSON.stringify(obj))è un modo veloce per copiare i tuoi oggetti, se i tuoi oggetti possono essere serializzati in json.

Ecco la funzione clone che eseguirà una copia completa dell'oggetto:

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;
}

Ora puoi usare in questo modo:

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

Uso Object.assign()

Esempio:

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

Un esempio più pulito che fa la stessa cosa:

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

Sei un po 'confuso su come funzionano gli oggetti in JavaScript. Il riferimento dell'oggetto è il valore della variabile. Non è presente alcun valore non serializzato. Quando crei un oggetto, la sua struttura viene archiviata in memoria e la variabile a cui è stata assegnata contiene un riferimento a quella struttura.

Anche se ciò che stai chiedendo fosse fornito in una sorta di semplice costrutto in linguaggio nativo, tecnicamente sarebbe comunque una clonazione.

JavaScript è in realtà solo un valore di passaggio ... è solo che il valore passato potrebbe essere un riferimento a qualcosa.

Usa questo

x = Object.create(x1);

xe x1saranno due oggetti diversi, il cambiamento xnon cambieràx1

Javascript passa sempre per valore. In questo caso sta passando una copia del riferimento oalla funzione anonima. Il codice sta usando una copia del riferimento ma sta mutando il singolo oggetto. Non c'è modo di far passare javascript da qualcosa di diverso dal valore.

In questo caso quello che vuoi è passare una copia dell'oggetto sottostante. La clonazione dell'oggetto è l'unica risorsa. Il tuo metodo di clonazione necessita però di un piccolo aggiornamento

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

Come considerazione per gli utenti di jQuery, c'è anche un modo per farlo in modo semplice usando il framework. Solo un altro modo in cui jQuery rende le nostre vite un po 'più facili.

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

Riferimenti :

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• e per approfondire la fonte .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

In realtà, Javascript viene sempre passato per valore . Ma poiché i riferimenti agli oggetti sono valori , gli oggetti si comporteranno come se fossero passati per riferimento .

Quindi, per aggirare questo problema , stringi l'oggetto e analizzalo di nuovo, entrambi utilizzando JSON. Vedi esempio di codice di seguito:

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

usa obj2 = {... obj1} Ora entrambi gli oggetti hanno lo stesso valore e un riferimento diverso

Avevo bisogno di copiare un oggetto per valore (non riferimento) e ho trovato utile questa pagina:

Qual è il modo più efficiente per clonare in profondità un oggetto in JavaScript? . In particolare, clonare un oggetto con il seguente codice di John Resig:

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

Con la sintassi ES6:

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

In sintesi, è solo un proxy eccessivamente complicato, ma forse Catch-All Proxies potrebbe farlo?

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() {}
  };
}

Se stai usando lodash o npm, usa la funzione di unione di lodash per copiare tutte le proprietà dell'oggetto in un nuovo oggetto vuoto in questo modo:

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

https://lodash.com/docs#merge

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