这篇文章主要介绍了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: trueconsole.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的实现原理是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。