JavaScript 原型與原型鏈

原型,共用屬性,不浪費(fèi)內(nèi)存


原型鏈:通過原型鏈實(shí)現(xiàn)的,子類調(diào)用父類的方法時(shí)會(huì)一直沿著原型鏈往上找到父類的原型對(duì)象并調(diào)用相應(yīng)的方法從而實(shí)現(xiàn)繼承;

????????本人對(duì)原型的理解為上圖所示,目前無(wú)法簡(jiǎn)要且切入的用字面語(yǔ)句詳解,參考方方老師的解釋更易理解:「每日一題」什么是 JS 原型鏈?



為什么有 valueOf / toString 屬性呢?

在我們沒有對(duì) obj 進(jìn)行任何其他操作之前,發(fā)現(xiàn) obj 已經(jīng)有幾個(gè)屬性(方法)了:

那么問題來(lái)了:valueOf / toString / constructor 是怎么來(lái)?我們并沒有給 obj.valueOf 賦值呀。

要搞清楚 valueOf / toString / constructor 是怎么來(lái)的,就要用到 console.dir 了。

上面這個(gè)圖有點(diǎn)難懂,我手畫一個(gè)示意圖:

我們發(fā)現(xiàn) console.dir(obj) 打出來(lái)的結(jié)果是:

1. obj 本身有一個(gè)屬性 name(這是我們給它加的)

2. obj 還有一個(gè)屬性叫做 __proto__(它是一個(gè)對(duì)象)

3. obj.__proto__ 有很多屬性,包括 valueOf、toString、constructor 等

4. obj.__proto__ 其實(shí)也有一個(gè)叫做 __proto__ 的屬性(console.log 沒有顯示),值為 null

現(xiàn)在回到我們的問題:obj 為什么會(huì)擁有 valueOf / toString / constructor 這幾個(gè)屬性?

答案:

這跟 __proto__ 有關(guān)。

當(dāng)我們「讀取」 obj.toString 時(shí),JS 引擎會(huì)做下面的事情:

1. 看看 obj 對(duì)象本身有沒有 toString 屬性。沒有就走到下一步。

2. 看看 obj.__proto__ 對(duì)象有沒有 toString 屬性,發(fā)現(xiàn) obj.__proto__ 有 toString 屬性,于是找到了

所以 obj.toString 實(shí)際上就是第 2 步中找到的 obj.__proto__.toString。

可以想象,

3. 如果 obj.__proto__ 沒有,那么瀏覽器會(huì)繼續(xù)查看 obj.__proto__.__proto__

4. 如果 obj.__proto__.__proto__ 也沒有,那么瀏覽器會(huì)繼續(xù)查看 obj.__proto__.__proto__.proto__

5. 直到找到 toString 或者 __proto__ 為 null。

上面的過程,就是「讀」屬性的「搜索過程」。

而這個(gè)「搜索過程」,是連著由 __proto__ 組成的鏈子一直走的。

這個(gè)鏈子,就叫做「原型鏈」。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容