instanceof使用中可能漏掉的一點細節

lauren_liuling 發布于2019-05-21 19:52 / 860人閱讀

摘要：代碼傳送門如上代碼示例，從其運行結果可知，是等于的原型的，是被對象后返回的函數，從驗證結果來看，函數經過的一層包裝，依然不會影響其原型檢測的綁定。

前言

在面向對象語言中，一般都有關鍵字 instanceof 來檢測對象類型，更準確點來說是檢測對象是哪個類型的實例。那么在 JS 中這個關鍵字又有什么不同之處呢？此文僅是一篇對 ES 標準中 instanceof 關鍵字的解讀，并記錄了在此過程中的對 JS 中對象系統的一點小感悟。

標準規定該關鍵字需要做什么

先舉例 a instanceof b, 下文中的步驟解釋中關鍵字左側的值用a表示，右側的值用b表示。

在標準中 instanceof 的行為被抽象到 InstanceofOperator 操作中，下面列出比較關鍵的兩個抽象操作，并根據自己的理解對整理了下步驟：

InstanceofOperator ( a, b)；

OrdinaryHasInstance ( b, a )；

InstanceofOperator ( a, b)

檢測b是否是對象，否TypeError

獲取b是否定義了Symbol.hasInstance

是則bSymbol.hasInstance，返回true或false

否則判斷b是否是函數，否則TypeError

是則返回OrdinaryHasInstance(b, a)的運行結果

OrdinaryHasInstance ( b, a )

判斷b是否是函數，否則返回false（這一步在這一場景中應該不會被調用）

是則判斷b是否是被bind包裝過的函數，是則獲取到bind包裝的函數bc，并調用InstanceofOperator( a, bc)

是則檢測a是否是對象，否則返回false

是則獲取b的prototype屬性bp

如果bp不是對象則返回TypeError

獲取a的原型并賦值給a

檢測a是否為null，是則返回false

否則判斷a和bp是否相等，是則返回true

否則重復步驟11~14直至返回true或false

幾處細節的推敲

在查看標準解釋是，有幾處理解的不是很明白，故使用幾個demo對自己的理解做了驗證

b應該是什么值

先看b不是對象是什么情況

從上面的結果可以看到報錯了，而且錯誤提示很明顯的提示右側的值不是對象，這是第1步檢測報的錯，那么如果是對象，而不是函數對象又會是什么情況呢？

嗯，沒錯，對象也報錯了，這次的錯誤是右側的值不可調用，即不是函數，這應是第4步檢測報的錯了。根據上面的步驟試試給對象設置Symbol.hasInstance屬性

這一次沒有報錯，檢測正常進行了，且返回了在函數中定義的結果，根據上面的步驟和代碼驗證，可以得出右側的值可以是設置了Symbol.hasInstance屬性的對象。且檢測的結果會被右側值定義的Symbol.hasInsyance函數攔截成函數返回的結果。

右側是函數的情況就是比覺正常的返回了，需要明確的一點是函數是不能直接設置Symbol.hasInstance屬性的，具體原因，感興趣的可以繼續查閱資料。到這里可以得出結論，b必須是設置了Symbol的對象或者函數，否則會報錯。

被 dind 包裝過的函數依然會返回原函數原型檢測結果

這一步存疑的原因是，沒有直接理解標準中的描述，只是有所猜測，不能確定，故驗證之。

var a = function() {
   this.name = "a";
}; 
var b = {testName: "b"};
a.prototype = b;

var c = new a();
console.log("c instanceof a", c instanceof a);   // true

var h = {name: "h"};
var s = a.bind(h);
console.log("c instanceof s", c instanceof s);   // true

代碼傳送門

如上代碼示例，從其運行結果可知，a.prototype 是等于 c 的原型的，s 是 a 被 bind 對象 h 后返回的函數，從驗證結果來看，函數經過 bind 的一層包裝，依然不會影響其原型檢測的綁定。

一點思考

在推敲上面細節時突然聯想到這種檢測實際是很合理的，類比 Java 中的檢測類，這里對象的原型不就可以類比成 Java 里面的類么。某個對象的原型是什么決定它具備了原型對象的特性的，而類不也是這樣么，該對象屬于哪個類，決定了該對象具備了哪些特性。不同的是，在JS中的檢測是往繼承鏈上多退了一步的，Java 中是直接檢測對象是否是該類的實例，而JS中是檢測的是對象的原型是否等于函數的prototype屬性，這應該就是繼承原理不同產生的區別吧。

之前從未認真的思考過，JS 中的整個對象系統是什么樣的，雖然現在也還是沒有理解太多，但是至少現在在我的認知里 JS 的對象系統是簡單而完善的，并沒有因為簡單而缺少了面向對象基本特性。雖然它靈活的允許你隨便更改一個對象的原型，也就是類，但是這依然不妨礙它成為一門可以面像對象編程的語言。

結論

instanceof 關鍵字檢測的本質是檢測左側對象的原型鏈上是否存在和右側函數的prototype屬性相等的對象，如果存在則返回true，如果不存在則返回false。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6703.html

Javascript模式閱讀筆記-1.函數模式

摘要：模式閱讀筆記第一部分函數模式總的來說模式是一本力薦的進階書書里面涉及了很多在學習過程中會碰到的坑然后提供了很不錯的解決方法雖然很多人吐槽這本書的翻譯但是糟糕的翻譯還是無法掩蓋這是一本好書的事實因此這里我會結合書上的知識和我的理解來寫一些 Javascript模式閱讀筆記-第一部分-函數模式總的來說,javascript模式是一本力薦的js進階書,書里面涉及了很多在學習javascr...

PiscesYE 2019-08-22 10:50 評論0 收藏0
關于如何把項目做得更好的一次思考

摘要：怎么樣才能把項目做的好一點或者更好首先，在老板看來，他肯定希望今天提的需求可以立馬就上線。關于注釋注釋是有必要的，這個對個人和他人都是有好處的。之前做開發的時候對項目完全沒有一個整體的思考，需求來了就知道做，只關心自己做的那部分的功能，做完拉到。但最近所做的項目中，遇到了不少問題，自己都忍不住吐槽起來了。如：項目經常性延期、代碼冗余、添加一個很小的新功能都需要改動很多地方，還對之前的...

羅志環 2019-08-23 11:00 評論0 收藏0
關于如何把項目做得更好的一次思考

摘要：怎么樣才能把項目做的好一點或者更好首先，在老板看來，他肯定希望今天提的需求可以立馬就上線。關于注釋注釋是有必要的，這個對個人和他人都是有好處的。之前做開發的時候對項目完全沒有一個整體的思考，需求來了就知道做，只關心自己做的那部分的功能，做完拉到。但最近所做的項目中，遇到了不少問題，自己都忍不住吐槽起來了。如：項目經常性延期、代碼冗余、添加一個很小的新功能都需要改動很多地方，還對之前的...

Enlightenment 2019-08-02 11:14 評論0 收藏0
代碼自動生成在重構中的一次探索

摘要：事件只能攜帶一個的。例如在上述代碼示例中的將所有使用發布事件的地方，全部修改為使用的方法。是否能夠編寫腳本或者自動化工具，自動化的完成重構工作。實施方案使用注解解析自動生成文件我們都知道，是通過注解來實現的。歡迎大家前往騰訊云社區，獲取更多騰訊海量技術實踐干貨哦~ 作者：吳濤導語：EventBus 已經火了很長一段時間了。最近我們項目決定引入EventBus，替換我們播放器現在的事...

ztyzz 2019-08-15 12:27 評論0 收藏0