Hello,大家好,今天给大家带来的是instanceof关键字的手写面试题,现在前端呢,可以说是非常的卷,企业为了考验我们对专业知识基础学习的是否扎实进行考察,所以一般会出一些简单的复原题,回归正题,instanceof关键字的作用呢是判断对象是否是某个构造函数的实例。下面我们一边看代码一边理解,大家有电脑的可以跟着一起敲,有助于学习。
第一步呢我们先实现一个继承的关系
function Person(name,age){
this.name=name
this.age=age
}
function Student(name,age,sex){
Person.call(this,name,age)
this.sex=sex
}
student构造函数继承Person构造函数
Student.prototype=new Person()
let p=new Student('wc',18,'男')
然后使用instanceof输出一下看一下
console.log(p)------->Person { name: 'wc', age: 18, classname: 'html' }
上面说明继承成功了,下面i我们开始模拟instanceof关键字,因为javascript不支持写自己的关键字,我们来用函数模拟一下。
function Person(name,age){
this.name=name
this.age=age
}
function Student(name,age,sex){
Person.call(this,name,age)
this.sex=sex
}
模拟的instanceof关键字
function myInstanceOf(className,obj){
}
Student.prototype=new Person()
let p=new Student('wc',18,'男')
console.log(myInstanceOf(Person,p))
上面定义好了一个函数我们现在来进行模拟的第一步获取构造函数的原型属性和实例的原型属性
function myInstanceOf(className,obj){
let fp=className.prototype;
let cp=obj.__proto__;
}
获取完成之后,首先我们想instanceof关键字的作用是判断对象是否是某个构造函数的实例,所以下一步我们进行判断
function myInstanceOf(className,obj){
let fp=className.prototype;
let cp=obj.__proto__;
return fb===cp;
}
写完这个函数之后,我们打印结果发现有点点瑕疵继承的不能判断,这样我们就不符合条件了,JavaScript里面的instanceof关键字是一层层的向上去找__proto__一样不一样,直到找到null为止。所以我们去改进一下我们的代码。
function myInstanceOf(className,obj){
let fp=className.prototype;
let cp=obj.__proto__;
//将这里换掉return fb===cp;
while(cp){
if(cp===fp){
return true
}
cp=cp.__proto__
}
return false
}
上面这段代码的大概意思就是说我们去找cp里面的__proto__原型属性去如果为null的话while就会自动停止返回false,要是找到了就返回true,大家看到下面有一个cp=cp.proto 这个的意思呢就是找他的上一层,写完这个我们来试一下发现可以了,结果也跟instanceof的结果一致了,我们就实现了这个instanceof关键字了,是不是很简单,也有可能有点难立即大家可以自己去敲一下代码试试,真的有助于记忆和理解,谢谢大家,今天的面试题就到这了,大家要是喜欢,可以留下一个赞吗,万分感谢,祝大家在前端的路上一帆风顺!!!
版权归原作者 会给我晚安吗 所有, 如有侵权,请联系我们删除。