資訊專欄INFORMATION COLUMN
摘要：一是如何工作的在上是這樣描述的運(yùn)算符用于測試構(gòu)造函數(shù)的屬性是否出現(xiàn)在對象原型鏈中的任何位置換句話說，如果，那么必須是一個(gè)對象，而必須是一個(gè)合法的函數(shù)。下面我們舉一個(gè)例子一步步來說明第一步每一個(gè)構(gòu)造函數(shù)都有一個(gè)屬性。
在 JavaScript 中，我們通常用 typeof 判斷類型，但是在判斷引用類型的值時(shí)，常常會遇到一個(gè)問題：無論引用的是什么類型的對象，都會返回 "object"(當(dāng)然還有 "function") 。有時(shí)候我們需要知道這個(gè)引用對象的類型是數(shù)組還是一個(gè)包裝對象，這個(gè)時(shí)候 instanceof 就可以派上用場了。
廢話不多說，先來幾個(gè)例子熱身一下，全部都知道同學(xué)，請點(diǎn)擊右上角的關(guān)閉按鈕；模模糊糊的同學(xué)，可以繼續(xù)閱讀，只要掌握了原理，這些題目真的是易如反掌。
const a = "abc";
console.log(a instanceof String); // ?
const b = new String("abc");
console.log(b instanceof String); // ?
console.log(String instanceof String); // ? console.log(Object instanceof Object); // ? console.log(Function instanceof Function); // ? console.log(Function instanceof Object); // ?一、instanceof 是如何工作的
在 MDN 上是這樣描述 instanceof 的：
instanceof 運(yùn)算符用于測試構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對象原型鏈中的任何位置
換句話說，如果A instanceof B，那么 A 必須是一個(gè)對象，而 B 必須是一個(gè)合法的 JavaScript 函數(shù)。在這兩個(gè)條件都滿足的情況下：
判斷 B 的 prototype 屬性指向的原型對象(B.prototype)是否在對象 A 的原型鏈上。如果在，則為 true；如果不在，則為 false。
下面我們舉一個(gè)例子一步步來說明：
function Person() {}
const p1 = new Person();
p1 instanceof Person; // true
第一步：每一個(gè)構(gòu)造函數(shù)都有一個(gè) prototype 屬性。
第二步：這個(gè) prototype 屬性指向這個(gè)構(gòu)造函數(shù)的原型對象
第三步：通過 new 關(guān)鍵字，可以創(chuàng)建一個(gè)構(gòu)造函數(shù)的實(shí)例(這里是 p1)，而實(shí)例上都有一個(gè) __proto__ 屬性
第四步：實(shí)例上的 __proto__ 屬性也指向構(gòu)造函數(shù)的原型對象，這樣我們就可以得到一張完整的關(guān)系圖了
第五步：p1 instanceof Person ，檢查 B(Person) 的 prototype 屬性指向的原型對象，是否在對象 A(p1) 的原型鏈上。
經(jīng)過我們的一步步分解，發(fā)現(xiàn) B(Person) 的 prototype 所指向的原型對象確實(shí)在 A(p1) 的原型鏈上，所以我們可以確定 p1 instanceof Person 一定是為 true 的。
我們再深入一點(diǎn)會發(fā)現(xiàn)，不僅僅 p1 instanceof Person 為 true ，p1 instanceof Object 也為 true ，這又是為什么呢？
其實(shí)，Person 的原型對象上也有一個(gè) __proto__ 屬性，而這個(gè)屬性指向 Object 的 prototype 屬性所指向的原型對象，我們可以在控制臺打印一下：
既然有這個(gè)關(guān)系，那我們再完善一下上面的圖：
通過 Person 的例子，我們知道構(gòu)造函數(shù) Object 上的 prototype 屬性會指向它的原型對象：
現(xiàn)在，我們要判斷 p1 instanceof Object 的真假，還記得上面的定義么？我們再來一遍：
判斷 B 的 prototype 屬性指向的原型對象(B.prototype)是否在對象 A 的原型鏈上。如果在，則為 true；如果不在，則為 false。
此時(shí)，我們發(fā)現(xiàn) B(Object) 的 prototype 屬性所指向的原型對象依然在 A(p1) 的原型鏈上，所以結(jié)果為 true 。
通過上面的例子我們可以知道，其實(shí) instanceof 的原理非常簡單，就是一個(gè)查找原型鏈的過程，所以只要你理解了原型鏈的相關(guān)知識，理解 instanceof 的原理就不會再有問題了。這里我們稍微總結(jié)兩點(diǎn)與instanceof 有關(guān)的原型鏈知識：
所有 JavaScript 對象都有 __proto__ 屬性，只有 Object.prototype.__proto__ === null ；
構(gòu)造函數(shù)的 prototype 屬性指向它的原型對象，而構(gòu)造函數(shù)實(shí)例的 __proto__ 屬性也指向該原型對象；
二、如何實(shí)現(xiàn)一個(gè) instanceof ?看了上面的過程，其實(shí)也很容易給出 instanceof 的實(shí)現(xiàn)方式：
function instance_of(left, right) {
const RP = right.prototype; // 構(gòu)造函數(shù)的原型
while(true) {
if (left === null) {
return false;
}
if (left === RP) { // 一定要嚴(yán)格比較
return true;
}
left = left.__proto__; // 沿著原型鏈重新賦值
}
}
有了上面的實(shí)現(xiàn)方法，我們再解釋一下上面的例子：
function Person() {}
const p1 = new Person();
p1 instanceof Object; // 用上面的代碼解釋它
第一次賦值
left = p1 right = Object RP = Object.prototype
第一次判斷
left !== null 并且 left !== RP ，繼續(xù)向上尋找 left 的原型鏈，準(zhǔn)備新的賦值。
第二次賦值
left = p1.__proto__ = Person.prototype
第二次判斷
left !== null 并且 left !== RP ，繼續(xù)向上尋找 left 的原型鏈，準(zhǔn)備新的賦值。
第三次賦值
left = p1.__proto__.__proto__ = Person.prototype.__proto__
第三次賦值
left !== null ，此時(shí) left === RP ，返回 true ，函數(shù)執(zhí)行完畢。
三、總結(jié)今天，我們用一個(gè)例子，通過畫圖以及代碼實(shí)現(xiàn)兩個(gè)角度剖析了 instanceof 的實(shí)現(xiàn)原理，其實(shí)思路也很簡單，無非就是一個(gè)沿原型鏈向上查找的過程。希望大家可以在以后的面試過程中，不再被" instanceof 的實(shí)現(xiàn)原理是什么？"這樣的面試難住了。
當(dāng)然，閱讀永遠(yuǎn)都只是一種十分被動的學(xué)習(xí)方法，我還是建議你能自己實(shí)踐一下。在文章的開頭有幾個(gè)例子，感興趣的同學(xué)可以挑選一個(gè)例子，自己通過畫圖以及代碼實(shí)現(xiàn)兩種方式再加深一遍理解，相信你會理解的更深刻。
如果文章中錯(cuò)誤或表述不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎指正。
最后，文章會首先發(fā)布在我的 Github ，以及公眾號上，歡迎關(guān)注。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103544.html
摘要：寫在前面的話最近互聯(lián)網(wǎng)朋友圈充斥著一股恐慌的氣息。本人作為一名，萬不敢稱資深，只是呆過幾年大型央企和大型互聯(lián)網(wǎng)企業(yè)，聊有一點(diǎn)自己的看法罷了。如果不放心，以一周為期，對展示在面前的機(jī)會進(jìn)行初步分級。也可以略高于期望，以此探一探對方的反應(yīng)。 showImg(https://segmentfault.com/img/bVblxeY?w=1008&h=298); 寫在前面的話 最近互聯(lián)網(wǎng)朋...
摘要：雖然有了十全的計(jì)劃，但如何高效率去記住上面那么多東西是一個(gè)大問題，看看我是怎么做的。 前言 前一篇文章講述了我在三月份毫無準(zhǔn)備就去面試的后果，一開始心態(tài)真的爆炸，但是又不服氣，一想到每次回來后家人朋友問我面試結(jié)果的期待臉，越覺得必須付出的行動來證明自己了。 面經(jīng)傳送門：一個(gè)1年工作經(jīng)驗(yàn)的PHP程序員是如何被面試官虐的？ 下面是我花費(fèi)兩個(gè)星期做的準(zhǔn)備，主要分三部分： 有計(jì)劃——計(jì)劃好...
摘要：拿到秋招的同學(xué)，如確定入職需與用人單位簽署三方協(xié)議，以保證雙方的利益不受損失。當(dāng)然每個(gè)崗位所要求的側(cè)重點(diǎn)不同，但卻百變不離其宗。方法論要想達(dá)成某個(gè)目標(biāo)都有其特定的方法論，學(xué)習(xí)技術(shù)也不例外，掌握適當(dāng)?shù)膶W(xué)習(xí)方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準(zhǔn)備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結(jié)一番，本文適合主動學(xué)習(xí)的，對自己要學(xué)的課程不明確的，對面試有...
摘要：拿到秋招的同學(xué)，如確定入職需與用人單位簽署三方協(xié)議，以保證雙方的利益不受損失。當(dāng)然每個(gè)崗位所要求的側(cè)重點(diǎn)不同，但卻百變不離其宗。方法論要想達(dá)成某個(gè)目標(biāo)都有其特定的方法論，學(xué)習(xí)技術(shù)也不例外，掌握適當(dāng)?shù)膶W(xué)習(xí)方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準(zhǔn)備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結(jié)一番，本文適合主動學(xué)習(xí)的，對自己要學(xué)的課程不明確的，對面試有...
摘要：所以要告訴她，等她回來后我指定比以前更愛她，我一直想告訴她，我比她想象中要更愛她。以后的生活就輕松很多。等到完成之后再回顧這一段路程的時(shí)候，你肯定會感慨良多。 她呀...
閱讀 1744·2023-04-26 02:11
閱讀 3061·2023-04-25 16:18
閱讀 3769·2021-09-06 15:00
閱讀 2708·2019-08-30 15:55
閱讀 1994·2019-08-30 13:20
閱讀 2104·2019-08-26 18:36
閱讀 3194·2019-08-26 11:40
閱讀 2634·2019-08-26 10:11
