由于小程序前端页面涉及到一些数组及对象的方法,当然也可以在原型链上新增自己所需的一些方法,因此本篇文章对于原型链做个大概介绍。
本篇文章我将从概念和对应题目知识点讲起,希望大家能有所收获
一、原型
①所有引用类型都有一个_proto_(隐式原型)属性(类似链表中的next指针), 链表可以通过.next访问下个元素,原型中可通过._proto_访问上一级元素。
②所有类都有一个prototype(原型)属性,例如:Object,Function,Array
③所有引用类型的_proto_属性指向它构造函数的prototype
例如:arr是一个数组实例,那么arr._proto_=Array.prototype
<br/><br/>
二、原型链
当访问一个对象的某个属性时,会先在这个对象本身上查找,如果没有找到,则会去它的_proto_上查找,即它的构造函数的prototype,如果还没有找到就会继续在构造函数prototype的_proto_中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
下面例子有助于你对原型链的理解:
arr为Array数组的实例
arr._proto_=Array.prototype
Array.prototype._proto_=Object.prototype
分析:arr这个数组实例,沿着原型链找,找到数组的原型对象,数组这个类沿着原型链找,找到对象的原型对象(最高级),因此也可以用arr._proto_._proto_来找到Object.prototype,类似链表中的next指针,只不过_proto_是往上找。
<br/><br/>
面试真题:
题目一:
instanceof的原理,并用代码实现
<br/>
分析:如果A沿着原型链能找到B.prototype,那么A instanceof B 为true(用_proto_来找)
解法:遍历A的原型链,如果找到B.prototype,返回true,否则返回false
const instanceof =(A,B)=>{
let p = A;
while(p){
if(p === B.prototype){
return true;
}
p = p._proto_;
}
return false;
}
<br/>
题目二:
var foo = {}, F = function(){};
Object.prototype.a = ‘value a’;
Function.prototype.b = ‘value b’;
console.log(foo.a);
console.log(foo.b);
console.log(F.a);
console.log(F.b);
<br/>
分析:如果在A对象上没找到x属性,那么会沿着原型链找x属性。(如果A为函数实例,那么A上面找不到,就去找Function这个类上有没有挂载x属性,如果没有就继续往上找到Object原型对象上有没有x属性)
解法:明确foo和F变量的原型链,沿着原型链找a属性和b属性
因此答案为:
'value a'
'undefined'
'value a'
'value b'
foo这个对象实例上没有b属性,是因为原型链不能往下找,只能一层一层往上找,即对象实例不能腆着脸问他的下级Function有没有挂载b这个属性
<br></br><br></br>
觉得本篇文章对你有帮助的请不要忘记一键三连加关注~~
你的支持就是对我最大的动力!!
会继续努力码更多的精品文章!!!
欢迎大家关注我的公众号:Smooth前端成长记录
公众号同步更新CSDN博客内容,想方便阅读博客的C友可以来关注我的公众号以便获得更优良的阅读体验~