Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu về hai loại giá trị khác nhau trong JavaScript bao gồm giá trị nguyên thủy và giá trị tham chiếu
JavaScript có hai loại giá trị khác nhau
- giá trị nguyên thủy
- Các giá trị tham khảo
Các giá trị nguyên thủy là các phần dữ liệu nguyên tử trong khi các giá trị tham chiếu là các đối tượng có thể bao gồm nhiều giá trị
Bộ nhớ ngăn xếp và đống
Khi bạn khai báo các biến, công cụ JavaScript sẽ phân bổ bộ nhớ cho chúng trên hai vị trí bộ nhớ. ngăn xếp và đống
Dữ liệu tĩnh là dữ liệu có kích thước cố định tại thời điểm biên dịch. Dữ liệu tĩnh bao gồm
- Các giá trị nguyên thủy [null, không xác định, boolean, số, chuỗi, ký hiệu và BigInt]
- Các giá trị tham chiếu tham chiếu đến các đối tượng
Vì dữ liệu tĩnh có kích thước không thay đổi, công cụ JavaScript phân bổ một lượng không gian bộ nhớ cố định cho dữ liệu tĩnh và lưu trữ nó trên ngăn xếp
Ví dụ: phần sau khai báo hai biến và khởi tạo giá trị của chúng thành một chuỗi ký tự và một số
Code language: JavaScript [javascript]
let name = 'John'; let age = 25;
Bởi vì name
và
0 là các giá trị nguyên thủy, công cụ JavaScript lưu trữ các biến này trên ngăn xếp như trong hình sauCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Lưu ý rằng chuỗi là đối tượng trong nhiều ngôn ngữ lập trình, bao gồm Java và C#. Tuy nhiên, chuỗi là giá trị nguyên thủy trong JavaScript
Không giống như ngăn xếp, JavaScript lưu trữ các đối tượng [và hàm] trên heap. Công cụ JavaScript không phân bổ lượng bộ nhớ cố định cho các đối tượng này. Thay vào đó, nó sẽ phân bổ thêm không gian khi cần thiết
Ví dụ sau định nghĩa các biến name
,
0 vàCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
3Code language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Code language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Bên trong, công cụ JavaScript phân bổ bộ nhớ như trong hình sau
Trong hình này, JavaScript phân bổ bộ nhớ trên ngăn xếp cho ba biến name
,
0 vàCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
3Code language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Công cụ JavaScript tạo một đối tượng mới trên bộ nhớ heap. Ngoài ra, nó liên kết biến
3 trên bộ nhớ ngăn xếp với đối tượng trên bộ nhớ heapCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Vì điều này, chúng tôi nói rằng biến
3 là một tham chiếu đề cập đến một đối tượngCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
thuộc tính động
Giá trị tham chiếu cho phép bạn thêm, thay đổi hoặc xóa thuộc tính bất kỳ lúc nào. Ví dụ
Code language: JavaScript [javascript]
let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
đầu ra
Code language: CSS [css]
{ name: 'John Doe', ssn: '123-45-6789' }
Không giống như một giá trị tham chiếu, một giá trị nguyên thủy không thể có thuộc tính. Điều này có nghĩa là bạn không thể thêm thuộc tính vào giá trị nguyên thủy
JavaScript cho phép bạn thêm thuộc tính vào giá trị nguyên thủy. Tuy nhiên, nó sẽ không có hiệu lực. Ví dụ
Code language: JavaScript [javascript]
let name = 'John'; name.alias = 'Knight'; console.log[name.alias]; // undefined
đầu ra
Code language: JavaScript [javascript]
undefined
Trong ví dụ này, chúng tôi thêm thuộc tính
9 vào giá trị nguyên thủyCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
name
. Nhưng khi chúng tôi truy cập thuộc tính 9 thông qua giá trị nguyên thủyCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
name
, nó sẽ trả về 3
let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
Code language: JavaScript [javascript]
Sao chép giá trị
Khi bạn gán một giá trị nguyên thủy từ một biến này cho một biến khác, công cụ JavaScript sẽ tạo một bản sao của giá trị đó và gán nó cho biến đó. Ví dụ
Code language: JavaScript [javascript]
let age = 25; let newAge = age;
trong ví dụ này
- Đầu tiên, hãy khai báo một biến mới
0 và khởi tạo giá trị của nó bằng
Code language: JavaScript [javascript]let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
5
Code language: JavaScript [javascript]let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
- Thứ hai, khai báo một biến khác là
6 và gán giá trị
Code language: JavaScript [javascript]let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
0 cho biến
Code language: JavaScript [javascript]let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
6
Code language: JavaScript [javascript]let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
Ở phía sau, công cụ JavaScript tạo một bản sao của giá trị gốc
5 và gán nó cho biếnCode language: JavaScript [javascript]
let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
6Code language: JavaScript [javascript]
let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
Hình dưới đây minh họa bộ nhớ ngăn xếp sau khi gán
Trên bộ nhớ ngăn xếp,
6 vàCode language: JavaScript [javascript]
let person = { name: 'John', age: 25, }; // add the ssn property person.ssn = '123-45-6789'; // change the name person.name = 'John Doe'; // delete the age property delete person.age; console.log[person];
0 là các biến riêng biệt. Nếu bạn thay đổi giá trị của một biến, nó sẽ không ảnh hưởng đến biến kiaCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Ví dụ
Code language: JavaScript [javascript]
let age = 25; let newAge = age; newAge = newAge + 1; console.log[age, newAge];
Khi bạn gán một giá trị tham chiếu từ một biến này cho một biến khác, công cụ JavaScript sẽ tạo một tham chiếu để cả hai biến tham chiếu đến cùng một đối tượng trên bộ nhớ heap. Điều này có nghĩa là nếu bạn thay đổi một biến, nó sẽ ảnh hưởng đến biến khác.
Ví dụ
Code language: JavaScript [javascript]
let person = { name: 'John', age: 25, }; let member = person; member.age = 26; console.log[person]; console.log[member];
Làm thế nào nó hoạt động
Đầu tiên, khai báo một biến
3 và khởi tạo giá trị của nó với một đối tượng có hai thuộc tínhCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
name
và 0Code language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
Thứ hai, gán biến
3 cho biếnCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
7. Trong bộ nhớ, cả hai biến đều tham chiếu đến cùng một đối tượng, như minh họa trong hình dưới đâyCode language: CSS [css]
{ name: 'John Doe', ssn: '123-45-6789' }
Thứ ba, thay đổi thuộc tính
0 của đối tượng thông qua biếnCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
7Code language: CSS [css]
{ name: 'John Doe', ssn: '123-45-6789' }
Vì cả hai biến
3 vàCode language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };
7 đều tham chiếu đến cùng một đối tượng, nên việc thay đổi đối tượng thông qua biếnCode language: CSS [css]
{ name: 'John Doe', ssn: '123-45-6789' }
7 cũng được phản ánh trong biếnCode language: CSS [css]
{ name: 'John Doe', ssn: '123-45-6789' }
3Code language: JavaScript [javascript]
let name = 'John'; let age = 25; let person = { name: 'John', age: 25, };