初學者指南: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 並返回其值。


瀏覽器如何查找不存在的屬性

當我們想要存取一個物件中不存在的屬性時,瀏覽器會按照以下的步驟來查找:

  1. 檢查物件本身是否有該屬性:首先,JavaScript 會檢查該物件本身是否定義了這個屬性。如果找到了,就返回屬性的值。
  2. 沿著原型鏈向上查找:如果在物件本身找不到,JavaScript 會通過 __proto__ 指向的原型物件進行查找。如果該原型物件中找到了,就返回屬性的值。
  3. 繼續向上查找:如果在當前原型物件中依然找不到屬性,JavaScript 會繼續沿著原型鏈向上查找,直到找到該屬性或者到達原型鏈的終點 null 為止。
  4. 返回 undefined:如果整條原型鏈都沒有找到該屬性,那麼 JavaScript 會返回 undefined

圖式流程說明

以下是查找不存在的物件屬性的流程圖,幫助你更好地理解整個查找過程:

[物件本身] -> 是否有該屬性? -> [] -> 返回屬性值
                             -> [] -> [__proto__] -> [原型物件] -> 是否有該屬性? -> [] -> 返回屬性值
                                                                          -> [] -> [__proto__] -> ... -> [null]
                                                                                                       -> [返回 undefined]

這個流程顯示了當查找一個不存在的屬性時,JavaScript 是如何一層層地通過 __proto__ 向上尋找,直到找到屬性或者到達 null,最終返回 undefined 的過程。


小結

在 JavaScript 中,當我們存取一個物件的屬性時,如果該屬性不存在,JavaScript 會通過 __proto__ 沿著原型鏈進行查找,直到找到該屬性或到達 null 為止,最終返回 undefined

理解這一過程,能幫助我們更好地理解, JavaScript 中的物件繼承機制以及原型鏈的工作方式。

希望這篇文章能幫助你理解 JavaScript 中不存在的物件屬性的查找過程,並為你進一步學習 JavaScript 的物件和原型鏈奠定基礎。

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *