前言
在开发项目中,一般原型链使用的比较少,因为现在大家都会使用现成的插件、框架、组件库等等,我们只需要调用已经封装好的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属性
六、总结
觉得本文写的不错的,希望点赞、收藏、加关注,每月不定期更新干货哦,谢谢您嘞!