轉載自??JS原型鏈與instanceof底層原理

一、問題：

instanceof 可以判斷一個引用是否屬于某構造函數；

另外，還可以在繼承關系中用來判斷一個實例是否屬于它的父類型。

老師說：instanceof的判斷邏輯是： 從當前引用的proto一層一層順著原型鏈往上找，能否找到對應的prototype。找到了就返回true。

如果沒有發生繼承關系，這個邏輯自然是沒有疑惑的。

但是，利用原型繼承，切斷了原來的prototype的指向，而指向了一個新的對象，這時instanceof又是如何進行判斷的呢？

本文通過代碼與畫圖分析instanceof的底層原理，借此復習原型鏈的知識。

---

二、instanceof底層是如何工作的：

function instance_of(L, R) {//L 表示左表達式，R 表示右表達式 var O = R.prototype; // 取 R 的顯示原型 L = L.__proto__; // 取 L 的隱式原型while (true) { if (L === null) return false; if (O === L) // 當 O 顯式原型 嚴格等于 L隱式原型 時，返回truereturn true; L = L.__proto__; }}

三、案例：未發生繼承關系時

function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}function Student(score){this.score = score;}var per = new Person("小明"，20，“男”)；var stu = new Student（98）；console.log(per instanceof Person); // trueconsole.log(stu instanceof Student); // trueconsole.log(per instanceof Object); // trueconsole.log(stu instanceof Object); // true

1、下圖1是未發生繼承關系時的原型圖解：

?

圖1 未發生繼承關系時的原型圖解

2、instanceof的工作流程分析

首先看per instanceof Person

function instance_of(L, R) { // L即per ； R即Personvar O = R.prototype; //O為Person.prototypeL = L.__proto__; // L為per._proto_while (true) { //執行循環if (L === null) //不通過return false; if (O === L) //判斷：Person.prototype ===per._proto_？return true; //如果等于就返回true，證明per是Person類型L = L.__proto__; }}

執行per instanceof Person ，通過圖示看出 Person.prototype ===per.proto 是成立的，所以返回true，證明引用per是屬于構造函數Person的。

接下來再看 per instanceof Object

function instance_of(L, R) { //L即per ； R即Object var O = R.prototype; //O為Object.prototype L = L.__proto__; // L為per._proto_ while (true) { //執行循環 if (L === null) //不通過 return false; if (O === L) //Object .prototype === per._proto_？ 不成立**return true; L = L.__proto__; //令L為 per._proto_ ._proto_ ，**//即圖中Person.prototype._proto_指向的對象//接著執行循環，//到Object .prototype === per._proto_ ._proto_ ？//成立，返回true}}

四、案例：發生繼承關系時

function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;}function Student(name,age,sex,score){Person.call(this,name,age,sex); this.score = score;}Student.prototype = new Person(); // 這里改變了原型指向，實現繼承var stu = new Student("小明",20,"男",99); //創建了學生對象stuconsole.log(stu instanceof Student); // trueconsole.log(stu instanceof Person); // trueconsole.log(stu instanceof Object); // true

1、下圖2是發生繼承關系后的原型圖解

?

圖2 發生繼承關系后的原型圖解

2、instanceof的工作流程分析

首先看 stu instanceof Student

function instance_of(L, R) { //L即stu ； R即Studentvar O = R.prototype; //O為Student.prototype,現在指向了perL = L.__proto__; //L為stu._proto_，也隨著prototype的改變而指向了perwhile (true) { //執行循環if (L === null) //不通過return false; if (O === L) //判斷： Student.prototype ===stu._proto_？return true; //此時，兩方都指Person的實例對象per，所以trueL = L.__proto__; }}

所以，即使發生了原型繼承，stu instanceof Student 依然是成立的。

接下來看 stu instanceof Person，instanceof是如何判斷stu繼承了Person

function instance_of(L, R) { // L即stu ； R即Person var O = R.prototype; // O為Person.prototype L = L.__proto__; //L為stu._proto_，現在指向的是per實例對象while (true) { // 執行循環 if (L === null) //不通過 return false; if (O === L) //判斷： Person.prototype === stu._proto_ ？ return true; //此時，stu._proto_ 指向per實例對象，并不滿足L = L.__proto__; //令L= stu._proto_._proto_，執行循環} //stu._proto_ ._proto_，看圖示知：} //指的就是Person.prototype，所以也返回true

stu instanceof Person返回值為true，這就證明了stu繼承了Person。

stu instanceof Object也是同理的，根據圖示即可輕易得出。

五、結論

1、instanceof 的作用

用于判斷一個引用類型是否屬于某構造函數；

還可以在繼承關系中用來判斷一個實例是否屬于它的父類型。

2、和typeof的區別：

typeof在對值類型number、string、boolean 、null 、 undefined、 以及引用類型的function的反應是精準的；但是，對于對象{ } 、數組[ ] 、null 都會返回object

為了彌補這一點，instanceof 從原型的角度，來判斷某引用屬于哪個構造函數，從而判定它的數據類型。

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS原型链与instanceof底层原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。