彻底搞懂原型链

初步认识

我相信作为前端人员；在面试工作中基本上10次面试就有8次被问到原型链的问题；那么原型链到底是什么呢？我们先来简单认识认识

Object.prototype.arrName = '张三'        
// 创建构成函数        
function Prom() {}        
console.log(Prom.arrName); // 结果：张三
复制代码

大家看到以上的代码；有一些朋友可能会感到吃惊；这是怎么回事啊？他们好像没得关系的嘛！其实这就是原型链，下面我将一步一步的说：我们一起学习

构成函数

Object.prototype.arrName = '张三'
// 创建构成函数function Prom() {}
console.dir(Prom)
复制代码

打印结果：

我们在打印构造函数的时候会发现：构造函数中有一个prototype（也就是原型）；而原型中有一个 constructor 指向的是Prom这个构造函数；

构造函数通过prototype指向原型链；原型链通过constructor可以访问到构造函数

实例

// 创建构成函数
function Prom() {}
Prom.prototype.arrAge = 18
let prom = new Prom()
console.dir(prom)
复制代码

打印结果：

我们在构造函数上的原型链增加了一个arrAge属性；而我们通过打印实例发现，原型链上的arrAge在实例的proto中；

实例可以通过proto访问原型链

arrName属性访问

现在我们回到最开始的那个问题；为什么在构造函数中可以访问到Object.prototype的属性；

Object.prototype.arrName = '张三'
// 创建构成函数
function Prom() {}
console.dir(Prom)
复制代码

打印结果：

从以上两种图（它们是同一个数据，只是没张开）；

第一张图：

从第一张图中可以看出来，构造函数通过prototype去原型链上查找，如果没有查找到的话就向其中的proto中去查找也就是object(大家注意看proto后面是跟了一个Object)；在原型链中如果查到Object以后还没有查找到数据的话；就不会再去查找，因为Object是最高层了，没有就直接返回null

第二张图：

我们从第二张图中可以很明显的看出；我们已经访问到arrName这个属性了；构造函数通过prototype访问构造函数的原型，然后构造函数的原型在通过proto访问到object的原型，实例是同理的，感兴趣的朋友可以去试试；

附加一张原型图：图片来源于网络，如有侵权请联系删除

总结

1：构造函数通过prototype可以访问到原型

2：构造函数通过new实例可以创建实例对象

3：实例通过proto可以访问到原型

4：原型可以通过construction访问到构造函数

5：构造函数的原型，可以通过proto访问到object.prototype

如果我们在原型上没有找到需要的属性的话；原型会通过proto向上一级对象的原型进行查找；直到查找到null为止