弄清JS的原型链，prototype、__proto__、constructor

前言

在开发项目中，一般原型链使用的比较少，因为现在大家都会使用现成的插件、框架、组件库等等，我们只需要调用已经封装好的api去使用就好，当然如果你在公司负责开发插件，那熟知原型链是非常重要的，即使你在公司原型链使用很少，但是你如果也很懂的话，那么你对js的基础必然更加扎实，下面我们就来聊聊原型链的结构

一、何为prototype

prototype：原型对象
每个构造函数都一个属性叫prototype，它叫原型，也是个对象，我们叫这个对象为原型对象

上图

二、何为__proto__

__ proto__：隐式原型，可以理解为原型指针
每个对象中有一个属性叫__proto__，它叫隐式原型，也就是指向父级原型的指针

上图

三、何为constructor

constructor：构造器
每个原型对象都有一个constructor属性，用于指向原型对象的构造函数

上图

四、何为原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，是通过原型对象(prototype)指向父类原型对象(__ proto__)，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

五、简单实现

function beauty() {
   // 构造函数
   this.skin = 'white'
   this.stature = '170'
 }

 // 向原型对象上添加属性
 beauty.prototype.realBeautiful = 'yes'
 let my = new beauty() // 实例化对象
 
 console.log(beauty.prototype) // 构造函数beauty的原型对象
 console.log(my) // 实例对象
 console.log(beauty.prototype === my.__proto__) // true；构造函数beauty的原型对象 全等于 实例对象的父级原型对象
 console.log(beauty === my.__proto__.constructor) // true；构造函数beauty 全等于 实例对象的父级原型对象的constructor属性

六、总结

---

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！