JavaScript: ¿Cómo pasar objetos por valor?

• Al pasar objetos como parámetros, JavaScript los pasa por referencia y dificulta la creación de copias locales de los objetos.

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

  otendrá .fooy .bar.

• Es posible evitar esto mediante la clonación; ejemplo 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)

  ono tendrá .fooo .bar.

Pregunta

1. ¿Existe una mejor manera de pasar objetos por valor, además de crear una copia / clon local?

Realmente no.

Dependiendo de lo que realmente necesite, una posibilidad puede ser establecer ocomo prototipo de un nuevo objeto.

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

alert( o.foo ); // undefined

Entonces, cualquier propiedad que agregue obj no se agregarán o. Cualquier propiedad agregada objcon el mismo nombre de propiedad que una propiedad en osombreará la opropiedad.

Por supuesto, cualquier propiedad agregada oestará disponible en objsi no está sombreada, y todos los objetos que tengan oen la cadena de prototipos verán las mismas actualizaciones o.

También si obj tiene una propiedad que hace referencia a otro objeto, como un Array, deberá asegurarse de sombrear ese objeto antes de agregar miembros al objeto; de lo contrario, esos miembros se agregarán objy se compartirán entre todos los objetos que tener objen la cadena de prototipos.

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

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

})(o);

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

Aquí puede ver eso porque no siguió la matriz en bazelo con una bazpropiedad de objla o.bazmatriz es modificado.

Entonces, en cambio, necesitarías sombrearlo primero:

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

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

})(o);

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

Consulte esta respuesta https://stackoverflow.com/a/5344074/746491 .

En resumen, JSON.parse(JSON.stringify(obj))es una forma rápida de copiar sus objetos, si sus objetos se pueden serializar a json.

Aquí está la función de clonación que realizará una copia profunda del objeto:

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

Ahora puedes usarlo así:

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

Utilizar Object.assign()

Ejemplo:

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

Un ejemplo más limpio que hace lo mismo:

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

Está un poco confundido acerca de cómo funcionan los objetos en JavaScript. La referencia del objeto es el valor de la variable. No hay ningún valor sin serializar. Cuando crea un objeto, su estructura se almacena en la memoria y la variable a la que se le asignó contiene una referencia a esa estructura.

Incluso si lo que está preguntando se proporcionara en algún tipo de construcción de lenguaje nativo fácil, técnicamente sería una clonación.

JavaScript es realmente solo pasar por valor ... es solo que el valor transmitido podría ser una referencia a algo.

Utilizar este

x = Object.create(x1);

xy x1serán dos objetos diferentes, el cambio xno cambiaráx1

Javascript siempre pasa por valor. En este caso, pasa una copia de la referencia oa la función anónima. El código usa una copia de la referencia pero está mutando el objeto único. No hay forma de hacer que JavaScript pase por nada que no sea el valor.

En este caso lo que quieres es pasar una copia del objeto subyacente. La clonación del objeto es el único recurso. Sin embargo, su método de clonación necesita un poco de actualización

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

Como consideración para los usuarios de jQuery, también hay una manera de hacer esto de una manera simple usando el marco. Solo otra forma en que jQuery nos hace la vida un poco más fácil.

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

referencias:

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• y profundizar en la fuente .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

En realidad, Javascript siempre se pasa por valor . Pero debido a que las referencias a objetos son valores , los objetos se comportarán como si fueran pasados ​​por referencia .

Así pues, para caminar por esta, stringify el objeto y analizar de nuevo, tanto el uso de JSON. Vea un ejemplo de código a continuación:

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} Ahora ambos objetos tienen el mismo valor pero una referencia diferente

Necesitaba copiar un objeto por valor (no referencia) y encontré útil esta página:

¿Cuál es la forma más eficiente de clonar en profundidad un objeto en JavaScript? . En particular, clonar un objeto con el siguiente código de John Resig:

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

Con la sintaxis de ES6:

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

Cuando se reduce a eso, es solo un proxy elegante demasiado complicado, pero ¿tal vez Catch-All Proxies podría hacerlo?

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 está usando lodash o npm, use la función de combinación de lodash para copiar en profundidad todas las propiedades del objeto a un nuevo objeto vacío como este:

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

https://lodash.com/docs#merge

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