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

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

一、原型

①所有引用类型都有一个_proto_(隐式原型)属性(类似链表中的next指针)， 链表可以通过.next访问下个元素，原型中可通过._proto_访问上一级元素。

②所有类都有一个prototype(原型)属性，例如：Object,Function,Array

③所有引用类型的_proto_属性指向它构造函数的prototype
例如：arr是一个数组实例，那么arr._proto_=Array.prototype

二、原型链

当访问一个对象的某个属性时，会先在这个对象本身上查找，如果没有找到，则会去它的_proto_上查找，即它的构造函数的prototype，如果还没有找到就会继续在构造函数prototype的_proto_中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

下面例子有助于你对原型链的理解：

arr为Array数组的实例

arr._proto_=Array.prototype

Array._proto_=Object.prototype

分析：arr这个数组实例，沿着原型链找，找到数组的原型对象，数组这个类沿着原型链找，找到对象的原型对象(最高级)，因此也可以用arr._proto_._proto_来找到Object.prototype，类似链表中的next指针，只不过_proto_是往上找。

面试真题：

题目一：
instanceof的原理，并用代码实现


分析：如果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;
}

题目二：

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);


分析：如果在A对象上没找到x属性，那么会沿着原型链找x属性。(如果A为函数实例，那么A上面找不到，就去找Function这个类上有没有挂载x属性，如果没有就继续往上找到Object原型对象上有没有x属性)

解法：明确foo和F变量的原型链，沿着原型链找a属性和b属性

因此答案为：

'value a'
'undefined'
'value a'
'value b'

foo这个对象实例上没有b属性，是因为原型链不能往下找，只能一层一层往上找，即对象实例不能腆着脸问他的下级Function有没有挂载b这个属性

觉得本篇文章对你有帮助的请不要忘记一键三连加关注~~

你的支持就是对我最大的动力！！

会继续努力码更多的精品文章！！！