JavaScript原型鏈中函數(shù)和對(duì)象的理解
__ proto__
最近在看高程4,原型鏈肯定是繞不過(guò)的,本瓜之前一直認(rèn)為,只要記住這句話(huà)就可以了:
一個(gè)對(duì)象的隱式原型(__proto__)等于構(gòu)造這個(gè)對(duì)象的構(gòu)造函數(shù)的顯式原型(prototype)
確實(shí),所有對(duì)象都符合這句真理,在控制臺(tái)打印一試便知:
const str = new String("123")
str.__proto__ === String.prototype // true
const arr = new Array(["123"])
arr.__proto__ === Array.prototype // true
const obj = new Object()
obj.__proto__ === Object.prototype // true
const bl = new Boolean(false)
bl.__proto__ === Boolean.prototype // true
......
const fn = function(){}
fn.__proto__ === Function.prototype // true
雖然我們平常都會(huì)像以下這樣寫(xiě)居多,聲明方式不一樣,但結(jié)果不變:
const str = '123'
str.__proto__ === String.prototype // true
const arr = [123]
arr.__proto__ === Array.prototype // true
const obj = {}
obj.__proto__ === Object.prototype // true
const bl = false
bl.__proto__ === Boolean.prototype // true
......
const fn = new Function()
fn.__proto__ === Function.prototype // true
順著這個(gè)思路,那我們接著在構(gòu)造函數(shù)上,繼續(xù)用 __proto__ 尋找,可以得到:
String.__proto__=== Function.prototype // true Array.__proto__=== Function.prototype // true Boolean.__proto__=== Function.prototype // true Object.__proto__=== Function.prototype // true Function.__proto__=== Function.prototype // true
這些基本構(gòu)造函數(shù)(String、Array、Boolean、Object 等),都是用 Function 來(lái)構(gòu)造生成的!!
還能用 __proto__ 繼續(xù)向上找嗎? 不能了,因?yàn)榻Y(jié)果會(huì)是一直重復(fù)下面這一行代碼:
Function.__proto__ === Function.prototype
所以,不管你怎樣通 __proto__ 隱式原型向上找,最終都只能找到 Function,而 Function 的隱式原型等于它的顯式原型;
prototype.__ proto__
但是這與我們所知不符呀,不是萬(wàn)物皆對(duì)象嗎??
我們嘗試再用 __proto__ 向前探一步,發(fā)現(xiàn):
Function.__proto__.__proto__ === Object.prototype // true Function.__proto__ === Function.prototype // true Function.prototype.__proto__ === Object.prototype // true
Function 這個(gè)終極構(gòu)造函數(shù),通過(guò)查找顯式原型的隱式原型,竟然等于 Object 的顯式原型!
其實(shí),其它構(gòu)造函數(shù)也一樣,都能找到 Object:
String.prototype.__proto__=== Object.prototype // true Array.prototype.__proto__=== Object.prototype // true Boolean.prototype.__proto__=== Object.prototype // true Object.prototype.__proto__=== Object.prototype // true
所有構(gòu)造函數(shù)的顯式原型的隱式原型 等于 Object 的顯式原型?。?/strong>
理解
為什么要這樣設(shè)定呢??
為什么對(duì)象只用 .__proto__ 向上查找,最終只能找到 Function?
為什么構(gòu)造函數(shù)用 .prototype.__proto__ 向上查找,能找到 Object ?
這樣原型鏈查找不是有兩套邏輯嗎?
后來(lái),本瓜歪理解:
【Function】就好像是創(chuàng)造萬(wàn)物的上帝,它創(chuàng)造了:各種各樣的物質(zhì)【對(duì)象】,物質(zhì)又分化為:人【字符串】、魚(yú)【數(shù)組】、鳥(niǎo)【布爾】、獸【數(shù)值】、石頭【Date】、花草【正則】等等分類(lèi);
這些不同種類(lèi)的物質(zhì),再一代一代延續(xù)(繁衍)下去。。。。。。
問(wèn):這些種類(lèi),它們子孫或后代們的特性【屬性】是來(lái)源于哪里呢??
1.可以從它們的祖先那里繼承而來(lái),這一點(diǎn)沒(méi)毛病,生物 DNA 遺傳,龍生龍、鳳生鳳,老鼠兒子會(huì)打洞
let Mouse = function(){
this.makeAHole = true
}
let m1 = new Mouse()
m1.makeAHole // true
m1.__proto__.makeAHole === Mouse.prototype.makeAHole // true
2.或者還可以從【物質(zhì)】這個(gè)原始分類(lèi)而來(lái), 因?yàn)槿唆~(yú)鳥(niǎo)獸、花草樹(shù)木、石頭都還是屬于“物質(zhì)”,比如都有碳元素,就像字符串、數(shù)組、布爾、數(shù)值都是屬于“對(duì)象”,都有 toString 方法;
Object.prototype.carbon = true let p1 = 'man' p1.carbon // true p1.__proto__.__proto__.carbon === Object.prototype.carbon// true
對(duì)象 Object(物質(zhì))是由函數(shù) Function(上帝)創(chuàng)造的,沒(méi)毛病。
上帝(Function)也是一種物質(zhì)(Object),一切都是物質(zhì)(Object),物質(zhì)(Object)起源于大爆炸,起源于空(null),也沒(méi)毛病。
再來(lái)看這張經(jīng)典的圖:

按照咱們“理解”也畫(huà)一個(gè):

哈哈哈,害行,這次就先理解到這吧,更多關(guān)于JavaScript原型鏈函數(shù)對(duì)象的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序聯(lián)網(wǎng)請(qǐng)求的輪播圖
這篇文章主要介紹了微信小程序聯(lián)網(wǎng)請(qǐng)求的輪播圖的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求wx.request詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
前端使用xlsx庫(kù)導(dǎo)出帶有樣式的excel文件
這篇文章主要為大家介紹了前端使用xlsx庫(kù)導(dǎo)出帶有樣式的excel文件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
JS前端canvas交互實(shí)現(xiàn)拖拽旋轉(zhuǎn)及縮放示例
這篇文章主要為大家介紹了JS前端canvas交互實(shí)現(xiàn)拖拽旋轉(zhuǎn)及縮放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08

