乐趣区

关于前端:深入理解JavaScriptinstanceof找祖籍

jiezi

咱们别离在 JavaScript 由什么组成 和 JavaScript 中的始皇 两篇文章中讲到了 instanceof，这篇文章好好说说 instanceof

什么是 instanceof？

MAN 的解释是：

instanceof 运算符用于检测构造函数的 prototype 属性是否呈现在某个 实例对象 的原型链上

由此可知，instanceof 的左侧必须是对象，能力找到它的原型链

而 instanceof 右侧必须是函数，函数才会有 prototype 属性

简略例子：

function Resume(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}

const johan = new Resume('johan', '18', 'swim');

console.log(johan instanceof Resume); // true
console.log(johan instanceof Object); // true

在 JavaScript 中的始皇 中有个例子：

Object instanceof Object
Function instanceof Function

咱们能够这样了解，Object 的某一原型链上有一值和 Object.prototype 相等；Function 的原型链上的某一值也与 Function.prototye 统一；

Object instanceof Object 能够了解为：

  • Object.__proto__ === Function.prototype
  • Function.prototype.__proto__ === Object.prototype
  • Object.__proto__.__proto__ === Object.prototype

Function instanceof Function 能够了解为：

  • Function.__proto__ === Function.prototype

其本质是因为内置函数都是由 Function 构造函数发明的，包含它本人

手写 instanceof

依照以上形容，即 右边的__proto__=== 左边.prototype

第一版

// 第一版
function myInstanceof(left, right) {if (left.__proto__ === right.prototype) {return true;} else {return false;}
}

console.log(myInstanceof(johan, Resume)); // true
console.log(myInstanceof(johan, Object)); // false

第一版咱们实现了 右边的__proto__=== 左边.prototype。但这还不够，myInstanceof 还要检测 left 是否在 right 的原型链上。所以咱们要递归 left.__proto__。直到原型链的最深一层 null

第二版

// 第二版
function myInstanceof(left, right) {if (left.__proto__ === right.prototype) {return true;} else {if (left === null) {return false;}
        return myInstanceof(left.__proto__, right);
    }
}

第三版：思考它是根本类型

在一开始就说了，instanceof 的左侧必须是对象，这样能力找到它的原型链

但不要遗记了，除了 null、undefined 外的根本类型，都是由根本包装类型“爱护”着

var num = 1;
console.log(myInstanceof(num, Number)); // true
console.log(num instanceof Number); // false

所以咱们要减少对根本类型的判断

function myInstanceof(left, right) {if (typeof left !== 'object' || left === null) return false;
    if (left.__proto__ === right.prototype) {return true;} else {if (left === null || left.__proto__ === null) {return false;}
        return myInstanceof(left.__proto__, right);
    }
}

看看他人的 instanceof 实现

function myInstanceof(left, right) {
    // 根本数据类型间接返回 false
    if (typeof left !== 'object' || left === null) return false;
    // getPrototype 是 Object 对象自带的一个办法，等效于__proto__
    let proto = Object.getPrototypeOf(left);
    while (true) {
        // 循环往下寻找，晓得找到雷同的对象
        if (proto == null) return false;
        // 找到雷同的原型对象
        if (proto == right.prototype) return true;
        proto = Object.getPrototypeOf(proto);
    }
}

while 的用法比俺高级多了

系列文章

  • 深刻了解 JavaScript- 开篇
  • 深刻了解 JavaScript-JavaScript 是什么
  • 深刻了解 JavaScript-JavaScript 由什么组成
  • 深刻了解 JavaScript- 所有皆对象
  • 深刻了解 JavaScript-Object（对象）
  • 深刻了解 JavaScript-new 做了什么
  • 深刻了解 JavaScript-Object.create
  • 深刻了解 JavaScript- 拷贝的机密
  • 深刻了解 JavaScript- 原型
  • 深刻了解 JavaScript- 继承
  • 深刻了解 JavaScript-JavaScript 中的始皇
退出移动版