评论

浅谈javascript的原型和原型链(新手懵懂想学会原型链?看这篇文章就足够啦!!!)

由于小程序前端页面涉及到一些数组及对象的方法,当然也可以在原型链上新增自己所需的一些方法,因此本篇文章对于原型链做个大概介绍

由于小程序前端页面涉及到一些数组及对象的方法,当然也可以在原型链上新增自己所需的一些方法,因此本篇文章对于原型链做个大概介绍。

本篇文章我将从概念和对应题目知识点讲起,希望大家能有所收获

一、原型

①所有引用类型都有一个_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友可以来关注我的公众号以便获得更优良的阅读体验~

最后一次编辑于  2021-11-07  
点赞 1
收藏
评论

1 个评论

  • 谋谋谋
    谋谋谋
    2021-11-08

    社区大佬真多 我算是学到了

    2021-11-08
    赞同 1
    回复
登录 后发表内容