Hướng dẫn which data types are passed by reference javascript? - những kiểu dữ liệu nào được truyền bởi javascript tham chiếu?

Hiểu cách các loại dữ liệu nguyên thủy và đối tượng hoạt động trong JavaScript

Ảnh của Glenn Carstens-Peters trên Upsplash

Nếu bạn chưa quen với JavaScript, rất có thể bạn đã gặp phải một số hành vi hài hước mà ngôn ngữ này cung cấp (triển lãm A). Lúc đầu, những điều kỳ lạ này có vẻ vô lý và bực bội, nhưng tôi hứa có một phương pháp đằng sau tất cả sự điên rồ đó.

Một trong những rào cản khó khăn nhất để vượt qua, theo ý kiến ​​khiêm tốn của tôi, là sự khác biệt giữa việc vượt qua giá trị so với việc đi qua bằng tài liệu tham khảo. Tại sao khái niệm này rất khó khăn? Đối với người mới bắt đầu, bạn chắc chắn có thể đi khá xa mà không thực sự hiểu cách JavaScript tương tác với các giá trị nguyên thủy và giá trị tham chiếu. Điều này có thể, và thường xuyên hơn không, sẽ dẫn đến một tấn lỗi khó theo dõi và khó khăn để sửa chữa. Thứ hai, đây là một khái niệm sẽ xuất hiện trong các cuộc phỏng vấn kỹ thuật, vì vậy không hiểu nó sẽ được tính là một lá cờ đỏ khổng lồ chống lại bạn.

Đừng sợ, người đọc đồng nghiệp! Hãy để giáo dục bắt đầu…

Các loại dữ liệu nguyên thủy

Trong JavaScript, chúng ta có thể chia các loại dữ liệu thành hai nhóm khác nhau, các loại dữ liệu nguyên thủy và đối tượng.

Biểu đồ minh họa các loại dữ liệu nguyên thủy, hoặc giá trị và các loại đối tượng hoặc giá trị tham chiếu

Có sáu loại dữ liệu nguyên thủy trong JavaScript: string, number, boolean, undefined, nullsymbol như ES6.

Các loại dữ liệu nguyên thủy được truyền hoặc sao chép, theo giá trị và là bất biến, có nghĩa là giá trị hiện tại không thể được thay đổi theo cách một mảng hoặc một đối tượng có thể. Hãy cùng xem mã bên dưới để thấy điều này trong hành động.by value and are immutable, meaning that the existing value cannot be altered the way an array or an object can. Let’s take a look at the code below to see this in action.

Được tạo bằng jsbin.com

Ở đây chúng tôi đã tạo ra hai biến, x = 10y = x. Vì 10 là một số và giá trị nguyên thủy, khi chúng tôi đặt y = x, chúng tôi thực sự đang sao chép giá trị, tức là 10 và gán nó cho number1. Chúng ta cũng có thể trực quan hóa điều này bằng cách sử dụng biểu đồ dưới đây.

Nếu chúng ta thay đổi giá trị của number2, chúng ta sẽ thấy rằng number1 vẫn giữ giá trị của nó là 10. Một lần nữa, điều này là do các giá trị nguyên thủy được sao chép, do đó, giá trị của ____ 11 không phụ thuộc vào giá trị của ____ 12. Hãy nghĩ về nó như là một bản sao của một bức tranh. Sau khi tạo bản sao, bạn có hai hình ảnh giống hệt nhau: bản gốc và bản fax. Nếu bạn đã cắt bản gốc làm đôi, chỉ có bản gốc sẽ bị thay đổi và fax sẽ vẫn giống hệt nhau.copied, so number1's value is independent of number2's value. Think of it as making a photocopy of a picture. After making the copy, you have two identical pictures: an original and a facsimile. If you were to cut the original in half, only the original would be altered and the facsimile would remain exactly the same.

Chúng tôi ghi đè lên giá trị của x nhưng y vẫn giữ nguyên

Đối tượng tham chiếu

Mặt khác, các đối tượng được truyền qua tham chiếu và trỏ đến một vị trí trong bộ nhớ cho giá trị, không phải là giá trị. Hãy cùng xem xét điều này trong mã của chúng tôi. by reference and point to a location in memory for the value, not the value itself. Let’s take a look at this in our code.

Các biến x và y hiện chỉ ra các đối tượng thay vì các loại dữ liệu nguyên thủy

Trong ví dụ này, number2 hiện là một đối tượng chỉ vào number8. Khi chúng tôi tạo biến number1 và gán cho nó giá trị của number2, giờ đây chúng tôi có thể nhấn vào các thuộc tính khác nhau của number2 bao gồm giá trị cho boolean2, tức là boolean3. Điều này có vẻ giống như logic chính xác được sử dụng cho các giá trị nguyên thủy, nhưng hãy để Lôi nhìn vào biểu đồ tiện dụng của chúng tôi dưới đây để thấy sự khác biệt tinh tế, nhưng quan trọng.

Cả x và y đều chỉ vào địa chỉ (tạo) trong bộ nhớ lưu trữ tham chiếu đến đối tượng

Bây giờ biểu đồ này trông hơi khác một chút so với khi các biến number2 và number1 của chúng tôi giữ các loại dữ liệu nguyên thủy. Trong phiên bản này, chúng tôi thấy rằng các giá trị cho cả number2 và number1 không phải là loại dữ liệu mà là tham chiếu đến một địa chỉ trong bộ nhớ, thực tế cùng một địa chỉ! Bây giờ, hãy để Lừa xem xét những gì xảy ra với number2 nếu chúng ta thêm một tài sản mới là boolean9 vào ________ 11references to an addresses in memory, the same address in fact! Now let’s take a look at what happens to number2 if we add a new property of boolean9 to number1…

number2 vẫn trả về một đối tượng nhưng bây giờ nó cũng có một thuộc tính bổ sung boolean9! Một lần nữa, điều này là do cả number2 và number1 đều chỉ vào cùng một đối tượng tham chiếu, do đó, bất kỳ thay đổi nào được thực hiện đối với một biến, sẽ được hiển thị trong biến khác.

Biểu đồ minh họa cách thay đổi trong y cập nhật giá trị tham chiếu được chia sẻ với x

Để giúp tôi nhớ khái niệm này, tôi thích nghĩ về các giá trị tham khảo như một ngôi nhà và các biến số như những người sống trong ngôi nhà đó. Tất cả các cư dân (biến) có thể nói rằng tôi có một ngôi nhà và chỉ vào cùng một ngôi nhà. Nếu một cư dân duy nhất quyết định họ muốn sơn ngôi nhà màu vàng, thì tất cả cư dân bây giờ có một ngôi nhà màu vàng vì nó được chia sẻ.

Hãy cùng xem thêm một ví dụ có chứa nhiều đối tượng tham chiếu.

Trong mã này, chúng tôi bắt đầu với một biến undefined5 chứa các thuộc tính của undefined6, undefined7 và undefined8. Khi chúng ta in đối tượng này vào bảng điều khiển, chúng ta sẽ nhận được chính xác những gì chúng ta mong đợi - cùng một đối tượng chúng ta vừa tạo.

Tiếp theo, chúng tôi có một hàm gọi là undefined9 có đối số, thực hiện một vài thay đổi, sau đó trả về một đối tượng. Khi chúng tôi tạo biến null0, chúng tôi gọi hàm ____39 bằng cách chuyển đối tượng ban đầu của chúng tôi là undefined5 vào nó. Bit thú vị là những gì xảy ra khi chúng ta in vào bảng điều khiển null0 và undefined5 một lần nữa.

Lưu ý rằng null5 trả về một đối tượng hoàn toàn mới với các thuộc tính mới. Bây giờ hãy nhìn vào những gì null6 trở lại. Điều này tương tự như đối tượng ban đầu của chúng tôi nhưng nó chứa các giá trị thuộc tính mới được giới thiệu trong hàm undefined9 của chúng tôi.

Kiểm tra sự bình đẳng

Cuối cùng, hãy để Lừa xem cách các loại dữ liệu nguyên thủy và các đối tượng tham chiếu hoạt động với các toán tử bình đẳng.

Khi nói đến các loại dữ liệu nguyên thủy, không có vấn đề gì ở bên phải dấu hiệu null8 miễn là các giá trị giống nhau. Chúng ta có thể thấy điều này ở trên với các biến null9 và symbol0 được viết khác nhau nhưng đánh giá theo cùng một giá trị khi chúng ta sử dụng symbol1, toán tử bình đẳng nghiêm ngặt.

Điều ngược lại là đúng trong ví dụ thứ hai cho boolean2 và symbol3. Mặc dù có vẻ như chúng chứa các giá trị giống hệt nhau, symbol4 là một mảng và một đối tượng tham chiếu, có nghĩa là symbol1 đang kiểm tra xem cả boolean2 và symbol3 có cùng tham chiếu đến giá trị trong bộ nhớ hay không. Mặt khác, symbol8 là đúng vì chúng chia sẻ cùng một đối tượng tham chiếu.

Dog and Bird có chung tài liệu tham khảo trong khi Cat không mặc dù có một mảng giống hệt

Sự kết luận

Và điều đó kết thúc phần giới thiệu của chúng tôi vào vượt qua giá trị vs vượt qua bằng cách tham khảo. Có nhiều chủ đề có thể được đề cập dưới sự cơ bản của chiếc ô này, bao gồm cả những gì xảy ra khi một tài liệu tham khảo bị ghi đè hoặc bị mất, cách sao chép một tham chiếu để tạo một đối tượng mới và đảm bảo rằng bản sao là một bản sao sâu, chỉ để đặt tên cho một vài . Tôi sẽ khuyên bạn nên kiểm tra các tài nguyên tôi đã sử dụng dưới đây đi vào một số chủ đề bổ sung này một cách chi tiết hơn.

Cảm ơn bạn đã đọc! Bản thân tôi còn khá mới mẻ với mã hóa, vì vậy nếu bạn có bất kỳ bình luận, sửa chữa, chiến sự và/hoặc mong muốn nào, xin vui lòng để lại nhận xét bên dưới!

Tài nguyên

Dưới đây chỉ là một số ít các tài nguyên tuyệt vời ngoài kia để giúp bạn hiểu các giá trị vượt qua so với các tài liệu tham khảo trong JavaScript.

Những loại dữ liệu nào được truyền bởi tham chiếu?

Các loại dữ liệu nguyên thủy như chuỗi, số, null, không xác định, boolean, được truyền theo giá trị trong khi các loại dữ liệu không nguyên thủy như đối tượng, mảng và chức năng được truyền bằng cách tham chiếu trong JavaScript.objects, arrays, and functions are passed by reference in Javascript.

Các loại dữ liệu tham chiếu trong JavaScript là gì?

Giá trị tham chiếu: JavaScript cung cấp ba loại giá trị tham chiếu bao gồm mảng, đối tượng và hàm.Kích thước của giá trị tham chiếu là động do đó nó được lưu trữ trên đống.Array, Object, and Function. The size of a reference value is dynamic therefore It is stored on Heap.

Những gì được thông qua bởi tham chiếu trong JavaScript?

Trong tham chiếu vượt qua, một hàm được gọi bằng cách truyền trực tiếp tham chiếu/địa chỉ của biến làm đối số.Thay đổi đối số bên trong hàm ảnh hưởng đến biến được truyền từ bên ngoài hàm.Trong các đối tượng và mảng JavaScript được truyền qua tham chiếu.a function is called by directly passing the reference/address of the variable as the argument. Changing the argument inside the function affects the variable passed from outside the function. In Javascript objects and arrays are passed by reference.

Có phải các lớp được thông qua bởi tham chiếu trong JavaScript?

Trong JavaScript, điều đó là không thể, vì vậy nó không vượt qua.Thật tốt khi có thể truyền tham chiếu đến các đối tượng có thể sửa đổi, nhưng đó không phải là những gì "vượt qua tham chiếu" có nghĩa là.it's not pass-by-reference. It's good that it's possible to pass references to modifiable objects, but that's not what "pass by reference" means.