初學者指南:JavaScript 中不存在的物件屬性與 __proto__
更新日期: 2024 年 10 月 25 日
在學習 JavaScript 的過程中,你可能會遇到一種情況,那就是嘗試存取物件中不存在的屬性。
這篇文章將帶你了解,當我們嘗試存取一個不存在的物件屬性時,JavaScript 是如何運作的,並且如何利用 __proto__
去查找這些屬性。
讓我們從物件的原型鏈(Prototype Chain)開始說起。
__proto__
與原型鏈(Prototype Chain)
在 JavaScript 中,每個物件都有一個特殊的屬性叫做 __proto__
,這個屬性指向了它的原型(Prototype)。
原型是一個物件,它可以包含其他屬性和方法,供其子物件繼承。
因此,當我們嘗試存取一個物件的屬性時,如果該屬性在當前物件中找不到,JavaScript 會通過 __proto__
來尋找該屬性。
這個過程會一直沿著原型鏈向上查找,直到找到該屬性或到達 null
為止。
這樣的查找過程就被稱為原型鏈查找(Prototype Chain Lookup)。
範例
假設我們有以下的代碼:
const animal = {
sound: "generic sound"
};
const dog = {
__proto__: animal,
breed: "Golden Retriever"
};
console.log(dog.sound); // 輸出 "generic sound"
console.log(dog.breed); // 輸出 "Golden Retriever"
在這個例子中,我們創建了一個 animal
物件,然後創建了另一個物件 dog
,並將 animal
作為 dog
的原型。
因此,當我們試圖存取 dog.sound
時,JavaScript 發現 dog
本身並沒有這個屬性,於是它就會通過 __proto__
查找 animal
,最終找到屬性 sound
並返回其值。
瀏覽器如何查找不存在的屬性
當我們想要存取一個物件中不存在的屬性時,瀏覽器會按照以下的步驟來查找:
- 檢查物件本身是否有該屬性:首先,JavaScript 會檢查該物件本身是否定義了這個屬性。如果找到了,就返回屬性的值。
- 沿著原型鏈向上查找:如果在物件本身找不到,JavaScript 會通過
__proto__
指向的原型物件進行查找。如果該原型物件中找到了,就返回屬性的值。 - 繼續向上查找:如果在當前原型物件中依然找不到屬性,JavaScript 會繼續沿著原型鏈向上查找,直到找到該屬性或者到達原型鏈的終點
null
為止。 - 返回
undefined
:如果整條原型鏈都沒有找到該屬性,那麼 JavaScript 會返回undefined
。
圖式流程說明
以下是查找不存在的物件屬性的流程圖,幫助你更好地理解整個查找過程:
[物件本身] -> 是否有該屬性? -> [是] -> 返回屬性值
-> [否] -> [__proto__] -> [原型物件] -> 是否有該屬性? -> [是] -> 返回屬性值
-> [否] -> [__proto__] -> ... -> [null]
-> [返回 undefined]
這個流程顯示了當查找一個不存在的屬性時,JavaScript 是如何一層層地通過 __proto__
向上尋找,直到找到屬性或者到達 null
,最終返回 undefined
的過程。
小結
在 JavaScript 中,當我們存取一個物件的屬性時,如果該屬性不存在,JavaScript 會通過 __proto__
沿著原型鏈進行查找,直到找到該屬性或到達 null
為止,最終返回 undefined
。
理解這一過程,能幫助我們更好地理解, JavaScript 中的物件繼承機制以及原型鏈的工作方式。
希望這篇文章能幫助你理解 JavaScript 中不存在的物件屬性的查找過程,並為你進一步學習 JavaScript 的物件和原型鏈奠定基礎。