Giải thích Đơn giản về Đối tượng và Tham chiếu Bộ nhớ trong JavaScript – tham chiếu đối tượng trong javascript

Làm thế nào chúng ta từng nghĩ về cách chúng được lưu trữ trong bộ nhớ? Nguyên thủy được giữ trực tiếp bởi các giá trị của chúng, trong khi Đối tượng được giữ bởi các tham chiếu của chúng. Nó có nghĩa là gì? Trong quá trình thực thi…

Bạn đang xem: tham chiếu đối tượng trong javascript

Trước khi tôi nói câu trả lời, hãy xem xét một số khái niệm trong JS và lập trình nói chung. < / p>

Kết quả của đoạn mã trên là gì?

Công cụ để quản lý các API của bạn ngay từ trình duyệt của bạn!

Trong JavaScript, chúng ta có hai kiểu giá trị:

  • Nguyên thủy
  • Object

Giá trị nguyên thủy là chuỗi, boolean, số, null, không xác định.

Đối tượng là các chữ, Mảng, Boolean, Ngày, RegExp, Hàm, v.v.

Làm thế nào chúng ta từng nghĩ về cách chúng được lưu trữ trong bộ nhớ? Các giá trị gốc được giữ trực tiếp bởi các giá trị của chúng, trong khi Đối tượng được nắm giữ bởi các tham chiếu của chúng.

Nghĩa là gì? Trong quá trình thực hiện một chương trình, chương trình được cấp phát hai không gian: Heap và Stack. Stack lưu trữ các biến và đối số hàm ở đây theo thứ tự Đầu tiên-Vào-Cuối cùng-Kết quả cuối cùng. Heap là một vùng bộ nhớ nơi các biến được lưu trữ theo kiểu nhanh chóng.

Khi chúng ta tạo các biến trong JS, chúng sẽ được tạo trong ngăn xếp. Các Nguyên thủy được cấp phát hoặc giữ trong ngăn xếp, trong khi Đối tượng được cấp phát trong Heap và địa chỉ bộ nhớ của cấp phát được giữ trong ngăn xếp:

 

Heap
----
| |
| |
| |
| |

Stack
memory addr
-----
000 | 2 |
001 | |
002 | |
003 | 5 |
004 | |
005 | |

Chúng tôi thấy một mô hình về cách tạo ngăn xếp và đống trong bộ nhớ. Xem mỗi ô nhớ được tham chiếu bởi một địa chỉ bộ nhớ. Địa chỉ bộ nhớ tại # 000 giữ giá trị số 2. Địa chỉ bộ nhớ # 005 không có giá trị nào. Địa chỉ bộ nhớ # 003 giữ giá trị 5.

Nếu chúng ta viết script JS với các giá trị nguyên thủy như sau:

 

const num1 = 90
const num2 = 100

Biểu diễn của chúng trong RAM sẽ như thế này:

 

Heap
----
| |
| |
| |
| |

Stack
memory addr
-----
num2 000 | 100 |
001 | |
002 | |
num1 003 | 90 |
004 | |
005 | |

Thấy chưa, chúng được lưu trữ trên ngăn xếp. num2 được giữ ở mem addr 000 với giá trị 100 và num1 được giữ ở mem addr 003 với giá trị 90. Vì chúng là nguyên thủy nên giá trị của chúng được giữ trực tiếp trên ngăn xếp.

Vì vậy, khi chúng ta muốn truy cập num2, chúng ta sẽ truy cập vào mem của nó addr 000, khi đó CPU sẽ truy xuất giá trị 100:

 

const num1 = 90
const num2 = 100

num2 // 100, điều này sẽ nhận được giá trị được giữ ở mem addr # 000

Chúng tôi viết một tập lệnh JavaScript với các giá trị Đối tượng:

 

const obj1 = {val: 80}
const obj2 = {val: 90}

Cái này sẽ được mô phỏng như sau:

 

Heap

mem addr ----
020 | |
021 | 80 |
022 | |
023 | 90 |
024 | |

Stack
memory addr
-----
obj2 000 | 023 |
001 | |
002 | |
obj1 003 | 021 |
004 | |
005 | |

Hãy xem, các Đối tượng được cấp phát trên ngăn xếp nhưng giá trị của chúng được cấp phát trên Heap! Các giá trị của chúng trên ngăn xếp giữ cho mem addr trong heap nơi có các giá trị.

Xem Thêm  Mô hình hộp: Các phần tử nội tuyến và khối - các phần tử nội tuyến và khối

obj1 nằm ở mem addr 003 trong ngăn xếp, giá trị ở đó 021 là mem addr trong heap nơi lưu trữ giá trị. Nhìn vào mem addr 021 trong heap, chúng ta thấy nó chứa 80, giá trị của obj1 .

Đối với obj2 cũng vậy. Giá trị của nó nằm trong đống tại mem addr 023.

Khi chúng ta muốn truy cập obj1

 

obj1

obj1 được lưu trữ tại 003. Động cơ sẽ nhận giá trị được lưu trữ tại 003 là 021. Sau đó. giá trị của mem addr 021 trong heap được truy xuất và trả về. Còn nhiều điều sâu xa về vấn đề này nhưng tôi đã nói đơn giản để chúng ta nắm được ý chính.

Bây giờ, nếu chúng ta tạo một biến mới obj3 và gán nó cho obj1:

 

const obj1 = {val: 80}
const obj2 = {val: 90}

const obj3 = obj1

Một vùng nhớ sẽ được tạo trong ngăn xếp để chứa obj3, giá trị được lưu tại obj1 mem addr 003 sẽ được sao chép và lưu tại obj3.

Giá trị tại obj1 là địa chỉ bộ nhớ trỏ đến không gian heap sẽ có obj3 giữ mem addr st ored at 003. Xem mô hình bộ nhớ.

 

Heap

mem addr ----
020 | |
021 | 80 |
022 | |
023 | 90 |
024 | |

Stack
memory addr
-----
obj2 000 | 023 |
001 | |
002 | |
obj1 003 | 021 |
004 | |
obj3 005 | 021 |

Bây giờ, obj3 và obj1 trỏ đến cùng một trình bổ sung ghi nhớ tại heap. Khi chúng ta thay đổi thuộc tính val trong obj1:

 

obj1.val = 111

Công cụ sẽ nhìn vào giá trị được lưu trữ tại 003 và sẽ thấy 021. Nó sẽ chuyển đến heap tại mem addr 021 và thay đổi val ở đó thành 111. Mô hình bộ nhớ:

 

Heap

mem addr ----
020 | |
021 | 111 |
022 | |
023 | 90 |
024 | |

Stack
memory addr
-----
obj2 000 | 023 |
001 | |
002 | |
obj1 003 | 021 |
004 | |
obj3 005 | 021 |

Bây giờ, nếu chúng ta truy cập thuộc tính val tại obj3.

 

obj3.val // 111

Chúng tôi thấy rằng thuộc tính val cũng sẽ bị thay đổi. Nó bị ảnh hưởng bởi tài sản val được thực hiện tại obj1. Điều này là do obj1 và obj3 trỏ đến cùng một addr mem.

 

Heap

mem addr ----
020 | |
021 | 111 |
022 | |
023 | 90 |
024 | |

Stack
memory addr
-----
obj2 000 | 023 |
001 | |
002 | |
obj1 003 | 021 |
004 | |
obj3 005 | 021 |

Truy cập thuộc tính val tại obj3, sẽ làm cho công cụ tra cứu giá trị được lưu trữ tại 005, là mem addr nơi obj3 nằm trên ngăn xếp. Engine sẽ thấy 021 ở 005, sau đó nó sẽ định vị giá trị của mem addr 021 tại heap, là 111.

obj3 và obj1 tham chiếu hoặc trỏ đến cùng một bộ nhớ trong heap, vì vậy bất kỳ sửa đổi nào từ một sẽ ảnh hưởng đến khác.

Vì vậy, câu trả lời cho câu hỏi ở đầu bài viết này:

 

const person1 = {name:" Chidume "}
const person2 = person1

person1.name = "Nnamdi"
person2

Hãy lấy từng mã một:

 

const person1 = {name:" Chidume "}

Đối tượng person1 được tạo và thuộc tính của nó được lưu trữ trên heap. Phần bổ sung mem của vị trí tại heap do người1 nắm giữ trong ngăn xếp.

 

Heap

mem addr ------- ----
020 | |
021 | |
022 | |
023 | "Chidume" |
024 | |

Stack
memory addr
-----
người1 000 | 023 |
001 | |
002 | |
003 | |
004 | |
005 | |

Khi chúng ta tạo person2 và gán nó cho person1.

 

const person2 = person1

Giá trị là trình bổ sung mem tại person1 được gán cho person2 trên ngăn xếp

 

Heap

mem addr -----------
020 | |
021 | |
022 | |
023 | "Chidume" |
024 | |

Stack
memory addr
-----
người1 000 | 023 |
001 | |
002 | |
003 | |
người2 004 | 023 |
005 | |

Hãy xem, person1 trỏ đến 023 tại heap, person2 trỏ đến 023 tại heap. Chúng được lưu trữ ở các vị trí khác nhau trên ngăn xếp nhưng chúng trỏ hoặc tham chiếu đến cùng một vị trí ghi nhớ trên đống.

Khi thuộc tính” name “được thay đổi:

 

person1.name = "Nnamdi"

< / pre>

Công cụ sẽ xác định vị trí của person1 ở 000 sau đó đọc giá trị là 023. Nó sẽ tham chiếu đến mem addr 023 tại heap và thay đổi giá trị thành “Nnamdi”:

 

Heap

mem addr ----------
020 | |
021 | |
022 | |
023 | "Nnamdi" |
024 | |

Stack
memory addr
-----
người1 000 | 023 |
001 | |
002 | |
003 | |
người2 004 | 023 |
005 | |

Bây giờ, khi chúng ta truy cập vào person2.

 

person2 // {name: "Nnamdi"}

Động cơ sẽ nhìn vào mem addr 004 của person2 trong ngăn xếp. Nó sẽ thấy 023, là một addr mem tại heap. Sau đó, động cơ sẽ chuyển đến heap và lấy giá trị từ mem addr 023 là “Nnamdi”.

Chúng ta thấy rằng các Đối tượng được tham chiếu bởi địa chỉ bộ nhớ và nguyên thủy được tham chiếu bởi các giá trị.

Điều này cũng tương tự trong C / C ++:

 

int * i = new int (10 );
int ii = 10;

int * iii = i;

Trong câu lệnh đầu tiên, một khoảng trắng được cấp phát trên heap và số 10 được ghi vào đó. Sau đó, phần bổ trợ ghi nhớ của không gian đống được gán cho i trên ngăn xếp.

Trong câu lệnh thứ hai, 10 được tạo trên ngăn xếp và được gán cho < code class = "fn np nq nr ng b"> ii .

Trong câu lệnh thứ ba, iii được tạo trên ngăn xếp và được gán cho giữ i . Giá trị trong i sẽ không phải là giá trị 10 mà là mem addr nơi 10 được cấp phát và lưu trữ, ví dụ: # 0987654. Vì vậy, iii sẽ trỏ đến mem addr # 0987654 giống như tôi.

Bây giờ, nếu iii thay đổi giá trị tại # 0987654,

 

* iii = 99;

các thay đổi sẽ được phản ánh trong tôi.

 

cout & lt; & lt; * tôi & lt; & lt; endl; // 99

Tất cả là do tham chiếu bộ nhớ.

Kết luận

Chúng ta đã hiểu cách con trỏ bộ nhớ hoạt động trong JS và trong lập trình. Tham chiếu bộ nhớ là gì và cách chúng được truyền trong các đối tượng.

Vì vậy, lần tới khi bạn tạo và thao tác các đối tượng, bạn sẽ biết và hiểu cách nó có thể có tác động dây chuyền đến các biến khác trỏ đến nó.

< p class = "pw-post-body-paragraph ke kf iw kg b kh ki kj kk kl km kn ko kp kq kr ks kt ku kv kw kx ky kz la lb ip fy" id = "edbb"> Nếu bạn có câu hỏi liên quan đến điều này hoặc bất cứ điều gì tôi nên thêm, sửa hoặc xóa, vui lòng nhận xét, gửi email hoặc gửi tin nhắn cho tôi

Cảm ơn !! !

Cảm ơn bạn đã ghé qua góc web nhỏ của tôi. Tôi nghĩ rằng bạn sẽ thích bản tin email của tôi về lời khuyên lập trình, dạy kèm, công nghệ, lập trình và phát triển phần mềm. Chỉ cần đăng ký bên dưới:


Xem thêm những thông tin liên quan đến chủ đề tham chiếu đối tượng trong javascript

C - Bài 17: Tham chiếu, tham trị.

  • Tác giả: thân triệu
  • Ngày đăng: 2017-08-23
  • Đánh giá: 4 ⭐ ( 3050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình C cơ bản. Lập trình C cho người mới bắt đầu. tham số, đối số, tham trị, gọi hàm bằng tham chiếu, kiểu lời gọi hàm trong ngôn ngữ lập trình c. định nghĩa, khái niệm, cách sử dụng trong ngôn ngữ c. C programming tutorial for the beginner.

Xử lý Object trong JavaScript

  • Tác giả: vi-magento.com
  • Đánh giá: 4 ⭐ ( 6649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ tìm hiểu về cách xử lý Object trong JavaScript nhé. Kiểu Object là kiểu được sử dụng nhiều nhất vì tính linh...

Đối tượng trong JavaScript | JavaScript Object

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 2528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn này, bạn sẽ học cách tạo đối tượng và sử dụng đối tượng trong JavaScript theo cách đơn giản, dễ hiểu nhất.

Object Javascript Và Những Điều Bạn Cần Biết

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 2972 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined, Null và còn 1 kiểu nữa đó là Object. Bài viết này chúng ta cùng tìm hiều về Object nhé!

Truyền tham chiếu và tham trị trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 1276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một cách khác, sự thay đổi của các tham số không ảnh hưởng ra bên ngoài của hàm. Nếu tham số truyền vào hàm theo cách truyền tham chiếu

[Tự học Javascript] Sao chép đối tượng, tham chiếu trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 1566 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những điểm khác biệt cơ bản của các đối tượng so với kiểu nguyên thủy là chúng được lưu trữ và sao chép bởi các tham chiếu.

Đối tượng trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 8644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình