Làm cách nào để gán đối tượng cho đối tượng khác trong JavaScript?

Một trong những khác biệt cơ bản của các đối tượng so với các đối tượng nguyên thủy là các đối tượng được lưu trữ và sao chép “theo tham chiếu”, trong khi các giá trị nguyên thủy. chuỗi, số, boolean, v.v. – luôn được sao chép “dưới dạng toàn bộ giá trị”

Điều đó dễ hiểu nếu chúng ta xem xét kỹ hơn điều gì sẽ xảy ra khi chúng ta sao chép một giá trị

Hãy bắt đầu với một nguyên hàm, chẳng hạn như một chuỗi

Ở đây chúng tôi đặt một bản sao của

let user = {
  name: "John"
};

let user = {
  name: "John"
};

let message = "Hello!";
let phrase = message;

Kết quả là chúng ta có hai biến độc lập, mỗi biến lưu trữ chuỗi

let user = {
  name: "John"
};

Một kết quả khá rõ ràng, phải không?

Đối tượng không phải như vậy

Một biến được gán cho một đối tượng không lưu trữ chính đối tượng đó, mà lưu trữ “địa chỉ của nó trong bộ nhớ” – nói cách khác là “một tham chiếu” đến nó

Hãy xem một ví dụ về một biến như vậy

let user = {
  name: "John"
};

Và đây là cách nó thực sự được lưu trữ trong bộ nhớ

Đối tượng được lưu trữ ở đâu đó trong bộ nhớ (ở bên phải của hình ảnh), trong khi biến

let user = { name: "John" };

let admin = user; // copy the reference

Chúng ta có thể nghĩ về một biến đối tượng, chẳng hạn như

let user = { name: "John" };

let admin = user; // copy the reference

Khi chúng ta thực hiện các thao tác với đối tượng, e. g. lấy một thuộc tính

let user = { name: "John" };

let admin = user; // copy the reference

Bây giờ đây là lý do tại sao nó quan trọng

Khi một biến đối tượng được sao chép, tham chiếu được sao chép, nhưng bản thân đối tượng không được sao chép

Ví dụ

let user = { name: "John" };

let admin = user; // copy the reference

Bây giờ chúng ta có hai biến, mỗi biến lưu trữ một tham chiếu đến cùng một đối tượng

Như bạn có thể thấy, vẫn còn một đối tượng, nhưng bây giờ có hai biến tham chiếu đến nó

Chúng ta có thể sử dụng một trong hai biến để truy cập đối tượng và sửa đổi nội dung của nó

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

Như thể chúng ta có một chiếc tủ có hai chìa khóa và sử dụng một trong số chúng (

let user = { name: "John" };

let admin = user; // copy the reference

Hai đối tượng chỉ bằng nhau nếu chúng là cùng một đối tượng

Chẳng hạn, ở đây

let user = { name: "John" };

let admin = user; // copy the reference

let user = { name: "John" };

let admin = user; // copy the reference

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

Và ở đây, hai đối tượng độc lập không bằng nhau, mặc dù chúng trông giống nhau (cả hai đều trống rỗng)

let a = {};
let b = {}; // two independent objects

alert( a == b ); // false

Đối với các so sánh như

let user = { name: "John" };

let admin = user; // copy the reference

let user = { name: "John" };

let admin = user; // copy the reference

Đối tượng const có thể được sửa đổi

Một tác dụng phụ quan trọng của việc lưu trữ các đối tượng dưới dạng tham chiếu là một đối tượng được khai báo là

let user = { name: "John" };

let admin = user; // copy the reference

Ví dụ

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

Có vẻ như dòng

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

let user = { name: "John" };

let admin = user; // copy the reference

Nói cách khác,

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

Điều đó nói rằng, nếu chúng ta thực sự cần tạo các thuộc tính đối tượng không đổi, thì cũng có thể, nhưng sử dụng các phương thức hoàn toàn khác. Chúng tôi sẽ đề cập đến điều đó trong chương Cờ thuộc tính và bộ mô tả

Vì vậy, sao chép một biến đối tượng sẽ tạo thêm một tham chiếu đến cùng một đối tượng

Nhưng nếu chúng ta cần sao chép một đối tượng thì sao?

Chúng ta có thể tạo một đối tượng mới và sao chép cấu trúc của đối tượng hiện có, bằng cách lặp lại các thuộc tính của nó và sao chép chúng ở cấp độ nguyên thủy

Như thế này

let user = {
  name: "John",
  age: 30
};

let clone = {}; // the new empty object

// let's copy all user properties into it
for (let key in user) {
  clone[key] = user[key];
}

// now clone is a fully independent object with the same content
clone.name = "Pete"; // changed the data in it

alert( user.name ); // still John in the original object

Chúng ta cũng có thể sử dụng phương thức Object. giao phó

Cú pháp là

Object.assign(dest, ...sources)

• Đối số đầu tiên

  let user = { name: 'John' };
  
  let admin = user;
  
  admin.name = 'Pete'; // changed by the "admin" reference
  
  alert(user.name); // 'Pete', changes are seen from the "user" reference

  4 là một đối tượng mục tiêu
• Các đối số khác là danh sách các đối tượng nguồn

Nó sao chép các thuộc tính của tất cả các đối tượng nguồn vào

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

Ví dụ: chúng ta có đối tượng

let user = { name: "John" };

let admin = user; // copy the reference

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }
alert(user.name); // John
alert(user.canView); // true
alert(user.canEdit); // true

Nếu tên thuộc tính được sao chép đã tồn tại, nó sẽ bị ghi đè

let user = {
  name: "John"
};

Chúng ta cũng có thể sử dụng

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

let user = {
  name: "John"
};

Tại đây, nó sao chép tất cả các thuộc tính của

let user = { name: "John" };

let admin = user; // copy the reference

Ngoài ra còn có các phương pháp nhân bản đối tượng khác, chẳng hạn như. g. sử dụng cú pháp trải rộng

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

Cho đến bây giờ, chúng tôi giả định rằng tất cả các thuộc tính của

let user = { name: "John" };

let admin = user; // copy the reference

Như thế này

let user = {
  name: "John"
};

Bây giờ, việc sao chép

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let user = { name: "John" };

let admin = user; // copy the reference

let user = {
  name: "John"
};

Để khắc phục điều đó và làm cho các đối tượng

let user = { name: "John" };

let admin = user; // copy the reference

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

Cuộc gọi

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

Đây là cách chúng ta có thể sử dụng nó trong ví dụ của mình

let user = {
  name: "John"
};

Phương thức

let a = {};
let b = {}; // two independent objects

alert( a == b ); // false

Nó cũng hỗ trợ các tham chiếu vòng tròn, khi một thuộc tính đối tượng tham chiếu chính đối tượng đó (trực tiếp hoặc thông qua một chuỗi hoặc các tham chiếu)

Ví dụ

let user = {
  name: "John"
};

Như bạn có thể thấy,

let a = {};
let b = {}; // two independent objects

alert( a == b ); // false

let a = {};
let b = a; // copy the reference

alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

let user = { name: "John" };

let admin = user; // copy the reference

Mặc dù, có những trường hợp khi

let a = {};
let b = {}; // two independent objects

alert( a == b ); // false

Chẳng hạn, khi một đối tượng có thuộc tính hàm

let user = {
  name: "John"
};

Thuộc tính chức năng không được hỗ trợ

Để xử lý các trường hợp phức tạp như vậy, chúng tôi có thể cần sử dụng kết hợp các phương pháp nhân bản, viết mã tùy chỉnh hoặc để không phát minh lại bánh xe, hãy sử dụng triển khai hiện có, chẳng hạn như từ thư viện JavaScript lodash

Các đối tượng được gán và sao chép theo tham chiếu. Nói cách khác, một biến lưu trữ không phải “giá trị đối tượng”, mà là “tham chiếu” (địa chỉ trong bộ nhớ) cho giá trị. Vì vậy, sao chép một biến như vậy hoặc chuyển nó dưới dạng đối số hàm sao chép tham chiếu đó, chứ không phải chính đối tượng đó

Tất cả các hoạt động thông qua các tham chiếu được sao chép (như thêm/xóa thuộc tính) được thực hiện trên cùng một đối tượng

Để tạo một “bản sao thực sự” (một bản sao), chúng ta có thể sử dụng

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

let a = {};
let b = {}; // two independent objects

alert( a == b ); // false

Làm cách nào để thêm một đối tượng vào một đối tượng khác trong JavaScript?

Làm cách nào để gán giá trị của một đối tượng cho đối tượng khác trong JavaScript?

Điều gì xảy ra khi bạn gán một đối tượng cho một đối tượng khác?