JavaScript：如何按值传递对象？

• 当将对象作为参数传递时，JavaScript通过引用传递它们，这使得创建对象的本地副本变得困难。

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

  o将有.foo和.bar。

• 可以通过克隆解决此问题。简单的例子：

  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)

  o不会.foo或.bar。

题

1. 除了创建本地副本/克隆之外，还有没有更好的方法可以按值传递对象？

并不是的。

根据你的实际需要，一个可能性可能是集o作为一个新的对象的原型。

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

alert( o.foo ); // undefined

因此，您添加到的任何属性obj都不会添加到中o。obj使用与其中相同的属性名称添加到的任何属性o都将阴影该o属性。

当然，如果没有阴影，添加到的任何属性o都将可用obj，并且o原型链中所有具有相同属性的对象都将看到相同的更新o。

另外，如果obj具有引用另一个对象的属性（例如Array），则需要确保在将对象添加到对象之前将其遮蔽，否则，这些成员将添加到中obj，并将在所有该对象之间共享有obj原型链。

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

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

})(o);

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

在这里，您可以看到，因为您没有使用bazon o的baz属性将on 遮蔽在Array 上obj，所以对o.bazArray进行了修改。

因此，您需要先对其进行阴影处理：

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

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

})(o);

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

看看这个答案https://stackoverflow.com/a/5344074/746491。

简而言之，JSON.parse(JSON.stringify(obj))如果您的对象可以序列化为json ，这是一种复制对象的快速方法。

这是克隆函数，将执行对象的深层复制：

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

现在，您可以像这样使用：

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

用 Object.assign()

例：

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

一个执行相同操作的更干净的示例：

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

您对对象在JavaScript中的工作方式有些困惑。对象的引用是变量的值。没有未序列化的值。创建对象时，其结构存储在内存中，分配给该对象的变量保留对该结构的引用。

即使您要问的内容是通过某种简单的本地语言结构提供的，从技术上讲，它仍会被克隆。

JavaScript实际上只是按值传递...只是传递的值可能是对某些东西的引用。

用这个

x = Object.create(x1);

x并且x1将是两个不同的对象，改变x不会改变x1

JavaScript总是按值传递。在这种情况下，它将引用的副本传递给o匿名函数。该代码使用的是引用的副本，但它正在更改单个对象。除了值之外，没有其他方法可以使javascript通过。

在这种情况下，您想要的是传递基础对象的副本。克隆对象是唯一的手段。您的克隆方法需要一些更新

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

考虑到jQuery用户，也有一种使用框架以简单方式执行此操作的方法。jQuery使我们的生活更轻松的另一种方式。

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

参考资料：

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• 并深入研究源代码。http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

实际上，JavaScript总是按值传递。但是由于对象引用是值，所以对象的行为就像通过引用传递一样。

因此，为了解决此问题，请使用JSON 对对象进行字符串化处理并将其解析回去。请参见下面的代码示例：

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

使用obj2 = {... obj1}现在两个对象的值相同，但引用不同

我需要按值（而不是引用）复制对象，并且发现此页面有帮助：

在JavaScript中深度克隆对象的最有效方法是什么？。特别是，使用John Resig的以下代码克隆对象：

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

使用ES6语法：

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

归根结底，这只是一个花哨的过于复杂的代理，但也许Catch-All Proxies可以做到吗？

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

如果您使用lodash或npm，请使用lodash的merge函数将对象的所有属性深度复制到新的空对象，如下所示：

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

https://lodash.com/docs#merge

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