js中instanceof方法的使用和实现原理

instanceof方法的定义

MDN上对instanceof方法的定义非常的简洁明，instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

MDN 地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instaniceof

使用

下面是一些根据定义简单的使用方法，右边参数的prototype 属性在左边参数的原型链上时就返回true，否则返回false。

console.log({} instanceof Object); // true
console.log(null instanceof Object); // false

console.log(String instanceof Object); // true
console.log(Number instanceof Object); // true

function P() {}
let p1 = new P();
console.log(p1 instanceof P); // true

let str1 = new String('asdfg');
let str2 = 'asdfg';
console.log(str1 instanceof String); // true
console.log(str2 instanceof String); // false

console.log(str1 instanceof Object); // true
console.log(str2 instanceof Object); // false

实现思路

根据定义和使用来看它有两个参数，左边的参数是一个对象必须有（__propto__属性），右边的参数是一个函数（必须有prototype属性），然后来通过左边参数的原型链一级一级的向上查找有变参数的原型是不是在左边参数的原型链上。

实现步骤

1、 创建一个函数，传入两个参数letf和right。
2、 判断左边参数是不是对象类型的，不是直接返回false（函数也是对象的一种）
3、 使用循环进行判断左边参数是否为null，为null的话就返回false（原型链的顶端就是null，查找到null的时候就代表右边参数的prototype 属性不在左边参数的原型链上），
判断左边参数是否等于右边参数的prototype 属性，等于就返回true。
4、 都不符合上述条件时，继续向上查找左边参数的原型链。

function myInstance(left, right) {
    if (typeof left !== "object" && typeof left !== "function") return false;
    const rightObj = right.prototype;
    while(1) {
        if (left === null) return false;
        if (left === rightObj) return true;
        left = left.__proto__;
    }
}

方法自测

console.log(myInstance({}, Object)); // true
console.log(myInstance(null, Object)); // false
console.log(myInstance(String, Object)); // true
console.log(myInstance(Number, Object)); // true

function P() {}
let p1 = new P();
console.log(myInstance(p1, P)); // true

let str1 = new String('asdfg');
let str2 = 'asdfg';
console.log(myInstance(str1, String)); // true
console.log(myInstance(str2, String)); // false
console.log(myInstance(str1, Object)); // true
console.log(myInstance(str2, Object)); // false