我在寫一篇圖解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)系

我們?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