两张图带你参透原型链

新年快乐。小白前端秀儿在这里给大家拜个早年。

去年的flag不知道你们实现了没有，反正我是没减肥成功，我又胖了，胖了，了。。。。

----------------------------------有点虚的分割线-------------------------------------

前（fei）言（hua）就到这里，我们来干巴的（别喊，来了老弟~！）

一直面试与被面试，来来回回老是说原型链原型链，那么原型链到底是个什么东西？他有什么价值吗？

阮一峰老湿从古代说起的js继承机制（大佬写的必须到位啊）：

www.ruanyifeng.com/blog/2011/0…

那么到这里简单有点了解或者你原来就有了解了吧？

我们继续-----

先来一个简单的构造函数

function objm (name, age){
    this.name = name;// 来个名字
    this.age = age;// 来个年龄
    this.setAge = function(age){
        this.age = age // 访问一下这个属性 改变age
    }
}
复制代码

那么来一个实例

var aa = new objm('tom', 18) // 为什么叫啊啊呢 因为最近抖音刷多了 那个粉丝的~~~~
复制代码

那么现在aa这个变量是拥有了name age setAge的三个属性了，验证一下

说到这里，有些人不耐烦了。秀儿啊，给哥(ba)哥(ba)上干货。得嘞，马上来~

先抛出概念，可以回来查

function定义的对象有一个prototype属性，new生成的对象就没有这个prototype属性

.constructor 访问（站在神秘对象角度）构造函数

.__proto__ 访问（站在实例角度）原型对象

.prototype 访问（站在构造函数角度）原型属性

有些读者就问了，秀儿啊，我衣（ku）服（zi）都脱了你给我看这个？

且听我慢慢道来~

这个步骤我们称之为实例化,aa就是实例，aa的构造函数就是我们的objm

那么这个神秘的object到底是什么？？？上图

到这里就很明白了， Function ====》objm====》aa

是不是就是一个链了

构造函数的原型属性就是他的实例的原型对象

那么再嵌套一层，想晕的先等会

图里写的很详细了，就这两张图，助你掌握原型链且扩展到js的继承

不对的地方大家批评指正。新年快乐

转载于:https://juejin.im/post/5c2c7fa95188250850608163