[JS奇怪的世界]No.47 瞭解原型
前言
JavaScript 用了原型繼承,所以代表有個叫作原型(prototype)的概念。
瞭解原型
首先我們知道物件可以有屬性和方法,然後我們可以使用點運算子取得屬性或方法,JavaScript 中所有物件、函數,都有原型屬性,而這個屬性會參考到另一個屬性通常被稱為 proto。
假設今天我們有一個 obj
的物件,底下有一個叫 prop1
,所以我們可以透過 obj.prop1
來取得。
JavaScript 中所有物件、函數,都有原型屬性。
而這個屬性會參考到另一個物件,稱之為 proto,而 proto 也可以有屬性,例如 prop2
,所以當我們要取用 prop2
時就可以這樣寫 obj.prop2
。
而我們使用點運算子去取用 obj
中的 prop2
時,會找不到,所以他會往原型裡面找。
那原型物件也可以指向到另一個物件。
每個物件都可以有自己的原型,當這個 proto 裡面有一個 prop3
,我們就可以用 obj.prop3
取得。
而這過程就像一個鏈子,所以又稱為原型鏈 (prototype chain),但是不要把他跟範圍鏈搞混了,雖然很相似,可是範圍鏈是尋找可以取用的變數,但原型鏈是尋找屬性及方法。
而一般來講這 proto 是隱藏起來的,所以我們才不用這樣撰寫 obj.proto.proto.prop3
,只需要 obj.prop3
就好。
但是 JavaScript 中有一個很有趣的狀況,當若有第二個 obj
時,他可以指向同一個原型。
所以當我們呼叫 obj2.prop2
,他一樣會回傳相同位子。
而以上這些就是原型及原型鏈個概念,只需要想簡單一點只是有一個特別的參考到我們的物件而已,那接下來我們直接來看點範例。
1 | var person = { |
這邊我們有兩個物件,接下來我們要將 john
設定成原型,但以下範例千萬不要使用於現實中,這只是為了簡單理解觀念而已。
1 | var person = { |
為什麼不是抓到 Default
?因為原型鏈的原因導致,所以點運算子會在 john
裡面找到 firstname
,所以就會停下來不會再找了,接下來在加一點物件上去。
1 | var person = { |
相信看到這邊已經越來越清楚怎麼跑了。