JavaScript: Làm thế nào để chuyển đối tượng theo giá trị?

• Khi chuyển các đối tượng dưới dạng tham số, JavaScript sẽ chuyển chúng theo tham chiếu và khó tạo bản sao cục bộ của các đối tượng.

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

  osẽ có .foovà .bar.

• Có thể giải quyết vấn đề này bằng cách nhân bản; ví dụ đơn giản:

  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)
  

  osẽ không có .foohoặc .bar.

Câu hỏi

1. Có cách nào tốt hơn để chuyển các đối tượng theo giá trị, ngoài việc tạo một bản sao / bản sao cục bộ không?

Không hẳn vậy.

Tùy thuộc vào những gì bạn thực sự cần, một khả năng có thể được đặt olàm nguyên mẫu của một đối tượng mới.

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

alert( o.foo ); // undefined

Vì vậy, bất kỳ thuộc tính nào bạn thêm vào objsẽ không được thêm vào o. Bất kỳ thuộc tính nào được thêm vào objcó cùng tên thuộc tính với thuộc tính trong osẽ làm mờ thuộc otính đó.

Tất nhiên, bất kỳ thuộc tính nào được thêm vào osẽ có sẵn objnếu chúng không bị che khuất và tất cả các đối tượng có otrong chuỗi nguyên mẫu sẽ thấy các bản cập nhật tương tự o.

Ngoài ra, nếu objcó thuộc tính tham chiếu đến một đối tượng khác, chẳng hạn như Mảng, bạn cần phải đảm bảo phủ bóng đối tượng đó trước khi thêm các thành viên vào đối tượng, nếu không, các thành viên đó sẽ được thêm vào objvà sẽ được chia sẻ giữa tất cả các đối tượng có objtrong chuỗi nguyên mẫu.

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

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

})(o);

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

Ở đây bạn có thể thấy rằng vì bạn không shadow Array ở baztrên ovới một baztài sản trên obj, các o.bazmảng được sửa đổi.

Vì vậy, thay vào đó, bạn cần làm bóng nó trước:

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

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

})(o);

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

Hãy xem câu trả lời này https://stackoverflow.com/a/5344074/746491 .

Tóm lại, JSON.parse(JSON.stringify(obj))là một cách nhanh chóng để sao chép các đối tượng của bạn, nếu các đối tượng của bạn có thể được tuần tự hóa thành json.

Đây là chức năng sao chép sẽ thực hiện sao chép sâu của đối tượng:

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

Bây giờ bạn có thể sử dụng như thế này:

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

Sử dụng Object.assign()

Thí dụ:

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

Một ví dụ rõ ràng hơn thực hiện điều tương tự:

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

Bạn hơi bối rối về cách các đối tượng hoạt động trong JavaScript. Tham chiếu của đối tượng là giá trị của biến. Không có giá trị chưa được công nghiệp hóa. Khi bạn tạo một đối tượng, cấu trúc của nó được lưu trong bộ nhớ và biến mà nó được gán để giữ một tham chiếu đến cấu trúc đó.

Ngay cả khi những gì bạn đang yêu cầu được cung cấp theo một cách dễ dàng, cấu trúc ngôn ngữ mẹ đẻ thì về mặt kỹ thuật, nó vẫn sẽ được nhân bản.

JavaScript thực sự chỉ là giá trị truyền ... nó chỉ là giá trị được truyền có thể là một tham chiếu đến một cái gì đó.

Dùng cái này

x = Object.create(x1);

xvà x1sẽ là hai đối tượng khác nhau, thay đổi trong xsẽ không thay đổix1

Javascript luôn đi theo giá trị. Trong trường hợp này, nó chuyển một bản sao của tham chiếu ovào hàm ẩn danh. Mã đang sử dụng một bản sao của tham chiếu nhưng nó làm thay đổi đối tượng duy nhất. Không có cách nào để khiến javascript chuyển qua bất kỳ thứ gì khác ngoài giá trị.

Trong trường hợp này, những gì bạn muốn là chuyển một bản sao của đối tượng bên dưới. Nhân bản đối tượng là cách duy nhất. Mặc dù vậy, phương pháp sao chép của bạn cần một chút cập nhật

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

Đối với người dùng jQuery, cũng có một cách để thực hiện việc này một cách đơn giản bằng cách sử dụng framework. Chỉ một cách khác jQuery giúp cuộc sống của chúng ta dễ dàng hơn một chút.

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

người giới thiệu :

• http://api.jquery.com/jquery.extend/
• https://stackoverflow.com/a/122704/1257652
• và để tìm hiểu kỹ nguồn .. http://james.padolsey.com/jquery/#v=1.8.3&fn=jQuery.extend

Trên thực tế, Javascript luôn được chuyển theo giá trị . Nhưng vì các tham chiếu đối tượng là các giá trị , các đối tượng sẽ hoạt động giống như chúng được truyền bằng tham chiếu .

Vì vậy, để giải quyết vấn đề này, hãy xâu chuỗi đối tượng và phân tích cú pháp nó trở lại, cả hai đều sử dụng JSON. Xem ví dụ về mã bên dưới:

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} Bây giờ cả hai đối tượng có cùng giá trị và tham chiếu khác nhau

Tôi cần sao chép một đối tượng theo giá trị (không phải tham chiếu) và tôi thấy trang này hữu ích:

Cách hiệu quả nhất để sao chép sâu một đối tượng trong JavaScript là gì? . Đặc biệt, sao chép một đối tượng với mã sau của John Resig:

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

Với cú pháp ES6:

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

Khi bạn hiểu nó, nó chỉ là một proxy quá phức tạp, nhưng có lẽ Catch-All Proxy có thể làm được điều đó?

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

Nếu bạn đang sử dụng lodash hoặc npm, hãy sử dụng chức năng hợp nhất của lodash để sao chép sâu tất cả các thuộc tính của đối tượng vào một đối tượng trống mới như sau:

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

https://lodash.com/docs#merge

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