javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS前端instanceof原理

JS前端攻坚浅析instanceof实现原理

作者:一只大加号

这篇文章主要为大家介绍了JS前端攻坚浅析instanceof实现原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

无论是平时开发还是学习中,对于类型的判断总是非常的重要,常见的类型判断方法有很多,对于每种比较常用的api我们需要对其进行一定的了解,才能更好的判断其中的实现方法,对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原理的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文