一張圖看懂Function和Object的關(guān)系及簡(jiǎn)述instanceof運(yùn)算符

我在寫一篇圖解prototype和proto的區(qū)別時(shí),搜資料搜到了一個(gè)有意思的現(xiàn)象,下面這兩個(gè)運(yùn)算返回的結(jié)果是一樣的:

Function instanceof Object;//true
Object instanceof Function;//true

這個(gè)是怎么一回事呢?要從運(yùn)算符instanceof說起。

一、instanceof究竟是運(yùn)算什么的?

我曾經(jīng)簡(jiǎn)單理解instanceof只是檢測(cè)一個(gè)對(duì)象是否是另個(gè)對(duì)象new出來的實(shí)例(例如var a = new Object(),a instanceof Object返回true),但實(shí)際instanceof的運(yùn)算規(guī)則上比這個(gè)更復(fù)雜。

首先w3c上有官方解釋(傳送門,有興趣的同學(xué)可以去看看),但是一如既往地讓人無法一目了然地看懂……

知乎上有同學(xué)把這個(gè)解釋翻譯成人能讀懂的語言(傳送門),看起來似乎明白一些了:

//假設(shè)instanceof運(yùn)算符左邊是L,右邊是R
L instanceof R 
//instanceof運(yùn)算時(shí),通過判斷L的原型鏈上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ?
//如果存在返回true 否則返回false

注意:instanceof運(yùn)算時(shí)會(huì)遞歸查找L的原型鏈,即L.proto.proto.proto.proto...直到找到了或者找到頂層為止。

所以一句話理解instanceof的運(yùn)算規(guī)則為:

instanceof****檢測(cè)左側(cè)的proto原型鏈上,是否存在右側(cè)的prototype原型。

二、圖解構(gòu)造器Function和Object的關(guān)系

圖解構(gòu)造器Function和Object的關(guān)系

我們?cè)倥浜洗a來看一下就明白了:

//①構(gòu)造器Function的構(gòu)造器是它自身
Function.constructor=== Function;//true

//②構(gòu)造器Object的構(gòu)造器是Function(由此可知所有構(gòu)造器的constructor都指向Function)
Object.constructor === Function;//true



//③構(gòu)造器Function的__proto__是一個(gè)特殊的匿名函數(shù)function() {}
console.log(Function.__proto__);//function() {}

//④這個(gè)特殊的匿名函數(shù)的__proto__指向Object的prototype原型。
Function.__proto__.__proto__ === Object.prototype//true

//⑤Object的__proto__指向Function的prototype,也就是上面③中所述的特殊匿名函數(shù)
Object.__proto__ === Function.prototype;//true
Function.prototype === Function.__proto__;//true

三、當(dāng)構(gòu)造器Object和Function遇到instanceof

我們回過頭來看第一部分那個(gè)“奇怪的現(xiàn)象”,從上面那個(gè)圖中我們可以看到:

Function.__proto__.__proto__ === Object.prototype;//true
Object.__proto__ === Function.prototype;//true

所以再看回第一點(diǎn)中我們說的instanceof的運(yùn)算規(guī)則,F(xiàn)unction instanceof Object 和 Object instanceof Function運(yùn)算的結(jié)果當(dāng)然都是true啦!

如果看完以上,你還覺得上面的關(guān)系看暈了的話,只需要記住下面兩個(gè)最重要的關(guān)系,其他關(guān)系就可以推導(dǎo)出來了:

1、所有的構(gòu)造器的constructor都指向Function

2、Function的prototype指向一個(gè)特殊匿名函數(shù),而這個(gè)特殊匿名函數(shù)的proto指向Object.prototype

至于prototype和proto的關(guān)系如何推導(dǎo),可以參考http://www.cnblogs.com/shuiyi/p/5305435.html

最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

  • JS中原型鏈,說簡(jiǎn)單也簡(jiǎn)單。 首先明確: 函數(shù)(Function)才有prototype屬性,對(duì)象(除Object...
    前小白閱讀 4,071評(píng)論 0 9
  • 理解 javascript 的原型鏈及繼承 以上所有的運(yùn)行結(jié)果都是 true; 三種構(gòu)造對(duì)象的方法: 通過對(duì)象字面...
    你期待的花開閱讀 1,670評(píng)論 0 3
  • “讀書是為了遇見更好的自己”。 所謂的終身學(xué)習(xí)不是狹隘的,不為文憑學(xué)歷,不為功名利祿,更不為附庸風(fēng)雅、故...
    安歌in閱讀 618評(píng)論 0 1
  • 梅雪賞 4 玄幻冰沙覆冷芳, 月華悻隔石橋長(zhǎng)。 磷波料峭蒼桑夢(mèng), 纖指一弦浮暗香。
    夢(mèng)緣閣主閱讀 137評(píng)論 2 4
  • 圣??诵跖謇?咕嚕咕嚕唱歌的井水 只有一點(diǎn)兒大的星球 被馴服的狐貍和獨(dú)一無二的玫瑰花 或許我是一株失落的感情猴面包...
    森宴閱讀 351評(píng)論 0 0

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