原型与原型链|博客系列
# 原型
# prototype
- 在最新ES规范里，prototype 被定义为：给其它对象提供共享属性的对象。
- 也就是说，prototype 自己也是对象，只是被用以承担某个职能罢了。
因此，prototype 描述的是两个对象之间的某种关系（其中一个，为另一个提供属性访问权限）。
# constructor与prototype联系
-
每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象)
-
原型对象中有一个属性constructor,它指向函数对象
-
给原型对象添加属性(一般是方法)
- 作用:函数的所有实例对象自动拥有原型中的属性(方法)
下面通过一个例子来说明:
function Demo() {}
console.log(Demo.prototype.constructor === Demo) // true
console.dir(Demo.prototype)
可以看到就是Demo函数对象的prototype原型是右边这个对象,那么Demo.prototype原型上有个constructor属性,这个属性正好指向Demo函数本身。
所有你可以理解成:
A的显示原型是B,则有:
A.prototype === B
B.constructor === A
我觉得这样子唯一的好处在于你可以找到我,我也可以找到你。好滑稽
# __proto__和prototype关系
再次强调 ：
1️⃣__proto__和constructor是对象独有的。2️⃣prototype属性是函数独有的
关于更多__proto__更深入的介绍，可以参看工业聚大佬的《深入理解 JavaScript 原型》一文。
# 显示原型和隐式原型
- 每个函数fun都独有一个prototype, 及显式原型(属性)
- 每个实例对象都有一个
__proto__, 及隐式原型(属性)** - 对象的隐式原型的值 === 其构造函数的显示原型的值
怎么理解呢？我们通过内存结构图来看看吧
function Demo() {}
Demo.prototype.say = () => { //给原型添加say方法
console.log("hello world")
}
console.log(Demo.prototype.say)
let fn = new Demo();
fn.say(); // 怎么找到say方法的呢?
console.log(fn.__proto__ === Demo.prototype) // true
我们从图中可以看到,Demo函数的原型跟它构造函数(Demo)创建的实例fn.__proto__指向同一个对象。
那么fn是怎么找到say方法的呢？
更加具体的说就是通过隐式原型__proro__找到的,分析如下:
- js引擎执行到fn.say()整行代码时,解析器去栈中查找fn变量
- 发现fn变量是引用类型,就去堆内存中查找地址为0x234的实体，查到后,发现并没有say属性,接着就去找
__proro__属性对应的原型 - 接着找到内存地址为0x345对应的实体,发现该实体中有say属性,同样的操作去找地址为0x789的实体，最后执行该函数。
那么是不是可以更加准确的说明:实例是通过隐式原型__proto__查找需要调用的属性的，那么我们通过接下来的代码去验证一下。
代码：
function Demo() {}
Demo.prototype.say = () => { //给原型添加say方法
console.log("hello world")
}
Demo.prototype.name = 'old name'
let fn = new Demo();
fn.say(); // 怎么找到say方法的呢?
console.log(fn.name)
console.log("为修改前",fn.__proto__ === Demo.prototype) // true
console.log("-------接下来修改fn的__proto__")
fn.__proto__ = {
say: () => {
console.log("hello 隐式原型")
},
name : 'new name'
}
console.log("修改实例中的隐式原型",fn.__proto__ === Demo.prototype) // true
console.log(fn.name)
fn.say()
console.log("重新创建一个Demo构造函数实例")
let demo1 = new Demo();
console.log(Demo.prototype === demo1.__proto__)
demo1.say()
首先的说明的是：
通过查阅相关的文档,ES6之前不能直接操作隐式原型,也不推荐你这么做。
通过修改fn的隐式原型,让它指向一个新的对象。那么fn.proto 不等于Demo.prototype. 这个例子也能证明一点,实例对象调用属性时,实例对象不具有该属性时,是通过隐式原型去找的该属性的,找不到的话,在它的隐式原型对象的隐式原型对象上找。
这也就是我们常说的,在原型上添加属性或者方法,实例可以共享,原因就在于我们并不推荐去修改实例的__proto__属性,这样子也就是会有一下结果:
function Demo() {
// 内部语句 this.prototype = {}
}
let fn = new Demo(); // 内部语句: fn.`__proto__` = Demo.prototype
// 实例化一个对象隐式原型会默认赋值: fn.__proto__ = Demo.prototype
// 定义函数时: 显式原型也会默认添加: Demo.prototype = new Object()
这里我们需要知道的是，__proto__是对象所独有的，并且__proto__是一个对象指向另一个对象，也就是他的原型对象。我们也可以理解为父类对象。它的作用就是当你在访问一个对象属性的时候，如果该对象内部不存在这个属性，那么就回去它的__proto__属性所指向的对象（父类对象）上查找，如果父类对象依旧不存在这个属性，那么就回去其父类的__proto__属性所指向的父类的父类上去查找。以此类推，知道找到 null。而这个查找的过程，也就构成了我们常说的原型链。
# 补充
# Object和Function的鸡和蛋的问题
**最后总结： ** 先有Object.prototype（原型链顶端），Function.prototype继承Object.prototype而产生，最后，Function和Object和其它构造函数继承Function.prototype而产生。
# MDN的推荐
使用__proto__是有争议的，也不鼓励使用它。因为它从来没有被包括在ECMAScript语言规范中，但是现代浏览器都实现了它。__proto__属性已在ECMAScript 6语言规范中标准化，用于确保Web浏览器的兼容性，因此它未来将被支持。它已被不推荐使用, 现在更推荐使用Object.getPrototypeOf/Reflect.getPrototypeOf 和Object.setPrototypeOf/Reflect.setPrototypeOf（尽管如此，设置对象的[[Prototype]]是一个缓慢的操作，如果性能是一个问题，应该避免）。
proto 属性也可以在对象文字定义中使用对象[[Prototype]]来创建，作为Object.create() 的一个替代。
# prototype chain 原型链
a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain.
如上，在 ECMAScript 2019 规范里，只通过短短的一句话，就介绍完了 prototype chain
原型链的概念，仅仅是在原型这个概念基础上所作的直接推论。
既然 prototype 只是恰好作为另一个对象的隐式引用的普通对象。那么，它也是对象，也符合一个对象的基本特征。
每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上，这个就是我们说的原型链了。
# 结论:
-
__proto__是原型链查询中实际用到的，它总是指向 prototype -
prototype 是函数所独有的**，**在定义构造函数时自动创建，它总是被 proto 所指。
-
所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。
