JS前端instanceof的实现原理是什么

这篇文章主要介绍了JS前端instanceof的实现原理是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS前端instanceof的实现原理是什么文章都会有所收获，下面我们一起来看看吧。

instanceof的实现

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

我们先来看下instanceof的用法，有点类似于对于一个父类，生成一份子类的实例，通过new的方式就可以实现

function Car(color) {
  this.color = color;
}
const c1 = new Car('Honda', 'Accord', 1998);
console.log(c1 instanceof Car);
// expected output: true
console.log(c1 instanceof Object);
// expected output: true

要判断一个对象是否存在某个实例对象的原型上，我们的c1是通过new出来的，可以对应我们图中的c1，通过画出来的原型链可以看到，如果三者之间形成一个闭环，那么证明就是存在同一个原型链中

我们传入c1和构造函数Car，通过比对c1的proto和Car的prototype，如果两者相等，则符合在同一个原型链上，那么instaceof返回true

如果不相等，那么按照原型链的规则,(proto = proto.__proto__),继续向上层进行寻找,，继续while的判断，直到找到最上层的原型链顶层null则停止寻找，所以这里的终止条件是proto==null

//console.log(c1 instanceof Car);
function _instanceof(l,r){
    let proto = l.__proto__
    let prototype = r.prototype
    while(proto!=null){
        if(proto==prototype){
            return true
        }else{
            proto = proto.__proto__
        }
    }
}

这里只是列举了原型链的一部分，还有Object的上层null以及function的原型没有列举出来，因为往上走的逻辑也是同样的while中的判断，我们只要找出了proto==prototype和 proto = proto.__proto__这两个条件，就能很完美的写出instance的函数方式。

关于“JS前端instanceof的实现原理是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JS前端instanceof的实现原理是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注本站行业资讯频道。