JavaScript: como passar objeto por valor?

• Ao passar objetos como parâmetros, o JavaScript os passa por referência e torna difícil criar cópias locais dos objetos.

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

  oterá .fooe .bar.

• É possível contornar isso clonando; exemplo simples:

  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ão terá .fooou .bar.

Questão

1. Existe uma maneira melhor de passar objetos por valor, além de criar uma cópia / clone local?

Na verdade não.

Dependendo do que você realmente precisa, uma possibilidade pode ser definir ocomo o protótipo de um novo objeto.

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

alert( o.foo ); // undefined

Portanto, quaisquer propriedades adicionadas objnão serão adicionadas o. Todas as propriedades adicionadas objcom o mesmo nome de propriedade de uma propriedade em oirão sombrear a opropriedade.

Obviamente, todas as propriedades adicionadas a oestarão disponíveis objse não estiverem sombreadas, e todos os objetos que estão ona cadeia de protótipos verão as mesmas atualizações em o.

Além disso, se objtem uma propriedade que faz referência a outro objeto, como um Array, você precisará ter certeza de sombrear esse objeto antes de adicionar membros ao objeto, caso contrário, esses membros serão adicionados obje serão compartilhados entre todos os objetos que tem objna cadeia de protótipos.

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

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

})(o);

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

Aqui você pode ver que porque você não sombra da matriz em bazon ocom uma bazpropriedade em obj, a o.bazmatriz é modificado.

Então, em vez disso, você precisa sombrear primeiro:

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

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

})(o);

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

Confira esta resposta https://stackoverflow.com/a/5344074/746491 .

Resumindo, JSON.parse(JSON.stringify(obj))é uma maneira rápida de copiar seus objetos, se seus objetos puderem ser serializados para json.

Aqui está a função de clone que realizará uma cópia profunda do 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;
}

Agora você pode usar assim:

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

Usar Object.assign()

Exemplo:

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

Um exemplo mais limpo que faz a mesma coisa:

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

Você está um pouco confuso sobre como os objetos funcionam em JavaScript. A referência do objeto é o valor da variável. Não há valor não serializado. Quando você cria um objeto, sua estrutura é armazenada na memória e a variável à qual foi atribuída contém uma referência a essa estrutura.

Mesmo se o que você está pedindo foi fornecido em algum tipo de construção de linguagem nativa fácil, ainda seria tecnicamente uma clonagem.

JavaScript é realmente apenas passado por valor ... é apenas que o valor passado pode ser uma referência a algo.

Usa isto

x = Object.create(x1);

xe x1serão dois objetos diferentes, a mudança xnão mudaráx1

Javascript sempre passa por valor. Neste caso está passando uma cópia da referênciao para a função anônima. O código está usando uma cópia da referência, mas está alterando o único objeto. Não há como fazer o javascript passar por qualquer coisa que não seja valor.

Neste caso, o que você deseja é passar uma cópia do objeto subjacente. Clonar o objeto é o único recurso. Seu método de clone precisa de uma pequena atualização embora

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

Como consideração aos usuários do jQuery, também há uma maneira de fazer isso de maneira simples usando o framework. Apenas outra maneira que o jQuery torna nossas vidas um pouco mais fáceis.

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

referências :

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

Na verdade, Javascript é sempre passado por valor . Mas porque as referências de objeto são valores , os objetos se comportarão como se fossem passados ​​por referência .

Portanto, para contornar isso, stringifique o objeto e analise -o de volta, ambos usando JSON. Veja o exemplo de código abaixo:

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} Agora, ambos os objetos têm o mesmo valor e referências diferentes

Eu precisava copiar um objeto por valor (não por referência) e achei esta página útil:

Qual é a maneira mais eficiente de clonar profundamente um objeto em JavaScript? . Em particular, clonar um objeto com o seguinte código de John Resig:

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

Com a sintaxe ES6:

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

No final das contas, é apenas um proxy extravagante e excessivamente complicado, mas talvez Catch-All Proxies pudesse fazer isso?

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 você estiver usando Lodash ou npm, use a função de mesclagem de Lodash para copiar em profundidade todas as propriedades do objeto para um novo objeto vazio como:

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

https://lodash.com/docs#merge

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