Đối tượng bất biến JavaScript là gì?

Mutable là loại biến có thể thay đổi. Trong JavaScript, chỉ các đối tượng và mảng có thể thay đổi, không phải giá trị nguyên thủy

Một đối tượng có thể thay đổi là một đối tượng có thể thay đổi trạng thái sau khi nó được tạo

Immutables là những đối tượng mà trạng thái của nó không thể thay đổi sau khi đối tượng được tạo

Hãy phá vỡ nó

Có hai loại dữ liệu trong JavaScript — Loại nguyên thủy (loại giá trị) và Loại không nguyên thủy (loại tham chiếu)

Nhìn vào ví dụ trên, tôi đã tạo một tên biến và gán cho nó một giá trị john. Bây giờ JavaScript sẽ lưu giá trị này dưới dạng một giá trị nguyên tử duy nhất trong bộ nhớ. Bây giờ, nếu tôi tạo một biến mới name2 và gán cho nó một giá trị của tên biến thì JavaScript sẽ tiếp tục và tạo một khoảng trống mới trong bộ nhớ và phân bổ cùng một giá trị của tên biến và gán nó cho biến name2. Giá trị mới được gán cho biến name2, hoàn toàn tách biệt với biến

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

0 và không có bất kỳ tham chiếu nào đến nó

Sử dụng bộ nhớ theo loại tham chiếu

Các giá trị tham chiếu là các đối tượng được lưu trữ trong bộ nhớ và tham chiếu đến các đối tượng thay vì các vị trí dành riêng trong bộ nhớ, không giống như các kiểu nguyên thủy. Hãy xem ví dụ sau để hiểu rõ hơn về cách các loại tham chiếu được lưu trong bộ nhớ bởi JavaScript

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

Chúng ta hãy khai báo một biến gọi là person sẽ chứa một đối tượng chứa

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

0 và tuổi của đối tượng person. Bây giờ tôi sẽ tiếp tục và tạo một biến khác có tên là

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 và gán cho nó cùng một đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3. Đây là nơi mọi thứ bắt đầu trở nên khác biệt so với các kiểu nguyên thủy. Trong trường hợp này, JavaScript sẽ lưu đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 đơn giản như một tham chiếu đến đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3

Nếu bạn nhìn vào hình ảnh này, bạn sẽ nhận ra rằng JavaScript ở đây thực sự đang trỏ đến cùng một đối tượng trong bộ nhớ. Mặc dù nó đã tạo một biến mới, dưới dạng một giá trị, nhưng biến đó chỉ đề cập đến cùng một đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3 mà chúng ta đã tạo trước đó

Hiểu tính bất biến và khả năng thay đổi của các loại nguyên thủy và tham chiếu trong JavaScript

Vì bây giờ chúng ta đã hiểu rõ về các kiểu nguyên thủy và kiểu tham chiếu trong JavaScript, nên chúng ta có thể dễ dàng hiểu khái niệm về tính có thể thay đổi và tính không thay đổi trong JavaScript. Mutable có thể được thay đổi hoặc thêm vào trong đó immutable có nghĩa là thứ không thể thay đổi hoặc thêm vào. Các giá trị nguyên thủy trong JavaScript không thể có bất kỳ thứ gì được thêm vào chúng, chúng chỉ có thể được gán lại và do đó tất cả các giá trị nguyên thủy trong JavaScript là bất biến. Hãy xem điều này với một ví dụ

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

Mở rộng ví dụ trước của chúng ta về các kiểu nguyên thủy, hãy in các giá trị của cả hai biến của chúng ta, i. e.

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

0 và name2 vào bảng điều khiển và xem những gì chúng tôi nhận được. Như mong đợi, cả hai biến đều trả về giá trị john. Bây giờ, hãy gán lại name2 thành

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

1 và sau đó in lại giá trị của cả hai biến vào bảng điều khiển. Bây giờ bạn thấy rằng giá trị của chỉ name2 đã được JavaScript gán lại cho

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

1, nhưng biến

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

0 không thay đổi. Điều này cho thấy JavaScript xử lý 2 biến này một cách riêng biệt, mặc dù ban đầu name2 được sao chép từ biến

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

0. Điều này chứng tỏ rằng các giá trị nguyên thủy trong JavaScript, trong trường hợp này là chuỗi, là bất biến

Hãy thử tái tạo ví dụ tương tự cho các loại tham chiếu. Tiếp tục từ ví dụ trước của chúng tôi, hãy in các giá trị của cả hai đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3 và

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 vào bảng điều khiển và xem những gì chúng tôi nhận được

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'john',
* age: 22,
* }
*/

Chúng tôi thấy hai đối tượng được in trên bàn điều khiển có cùng thuộc tính. Bây giờ tôi sẽ thay đổi một trong các thuộc tính của đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 và in lại chúng ra bàn điều khiển

let person2.name = 'doe'; 

console.log(person);
console.log(person2);

/*
* {
* name: 'doe',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

Bạn thấy rằng JavaScript đã thay đổi con người cũng như

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2. Điều này là do đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 được tạo bằng cách tham chiếu đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3. Với các loại tham chiếu, JavaScript tạo một tham chiếu đến cùng một đối tượng và đối tượng vẫn có thể thay đổi. Vì đối tượng có thể thay đổi nên nó có thể được thay đổi hoặc có thể thêm thuộc tính mới

Toán tử lây lan
Toán tử trải rộng đã được giới thiệu trong ES6 ( thông tin thêm về ES6 và cho phép bạn sao chép các đối tượng của mình một cách an toàn và tạo một phiên bản mới của đối tượng thay vì chỉ tham chiếu đối tượng trước đó. Hãy cùng xem ví dụ tương tự và xem cách chúng ta có thể sao chép một đối tượng và lưu một phiên bản mới của đối tượng của biến

let person = {
    name: 'john',
    age: 22,
};

let person2 = {...person};
let person2.name = 'doe';

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

Hãy lấy cùng một đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3 và thay vì gán nó trực tiếp cho một biến lần này, hãy sử dụng toán tử trải rộng để sao chép nó. Toán tử trải rộng có thể được sử dụng bằng cách đặt trước ba dấu chấm

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'john',
* age: 22,
* }
*/

4 trước đối tượng mà bạn muốn sao chép và đóng gói nó bằng cú pháp đối tượng bằng chữ. Bằng cách này, JavaScript tạo một đối tượng mới và lưu trữ nó trong biến

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2. Hãy thử thay đổi một trong các thuộc tính của

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2. Tôi sẽ đổi tên thành

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

1. Bây giờ, hãy in cả hai đối tượng ra bàn điều khiển và xem những gì chúng ta nhận được. Bạn thấy đấy, lần này, chúng ta chỉ thay đổi thuộc tính name của đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 chứ không phải đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3. Điều này là do

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

2 đã được tạo và lưu dưới dạng đối tượng mới bằng cách sử dụng toán tử trải rộng và không phải là tham chiếu đến đối tượng

let person = {
    name: 'john',
    age: 22,
};

let person2 = person;

3

Nhận quyền truy cập vào nhiều câu chuyện như vậy trên Cloudaffle
Cảm ơn đã đọc, và hy vọng, điều này hữu ích
Tôi đã tạo một bảng mã JavaScript mở rộng. Nó đã được thiết kế theo cách giúp bạn dễ dàng tham khảo từng thuộc tính và phương thức cho các đối tượng JavaScript khác nhau. Tải xuống hoàn toàn miễn phí từ liên kết trên ☺

Nút JavaScript. phản ứng js

Bài báo cáo

Thưởng thức bài viết này?

15

Chia sẻ

Manik Bajaj

Làm theo

Khám phá và đọc thêm các bài viết từ Manik Bajaj

bắt đầu

Thưởng thức bài viết này?

Để lại một lượt thích và bình luận cho Manik

15

Hãy là người đầu tiên chia sẻ ý kiến ​​của bạn

Hỗ trợ đánh dấu hương vị GitHub

Gửi đi

SHAHZEB CHÂU PHI

một tháng trước

lời giải rất hay và chi tiết

Hồi đáp

araratkoj

2 năm trước

bạn có muốn được công nhận trên đường phố là một người có số lượng người đăng ký lớn không? . // hoa anh túc. com/ và kiếm cho mình nhiều người đăng ký hơn

Đối tượng nào là bất biến?

Làm cách nào để tạo đối tượng JavaScript bất biến?

Bất biến và có thể thay đổi trong JavaScript là gì?

Một ví dụ về bất biến là gì?