__proto__ 和 prototype ➡️ 原型链继承

参考文章：

• 从proto和prototype来深入理解JS对象和原型链

---

写在前面的自己的理解：

• 每个函数都有自己的prototype, 是用来把函数引入原型链的小弟角色
• 所有函数的__proto__都是Function. prototype

---

两张原理图是一样的：

Prototype chain 1 Prototype chain 2

有人说：这张图指10块钱，来把这10块钱赚了吧。

---

__proto__

• 对象__proto__属性的值就是它所对应的原型对象, 表示继承关系(所谓的原型链)。

  eg: 如图中的继承关系（原型链）：
  一条是：
  (实例对象)foo--->Foo. prototype--->Object. prototype--->null
  另一条是：
  (函数)Foo()--->Function. prototype--->Object. prototype--->null

---

prototype

• 只有函数才有prototype属性。函数在JS中真的很特殊，是所谓的一等公民。

• 当你创建函数时，JS会为这个函数自动添加prototype属性, 值是一个有constructor 属性的对象，不是空对象。而一旦你把这个函数当作构造函数（constructor）调用（即通过new关键字调用），那么JS就会帮你创建该构造函数的实例，实例继承构造函数prototype的所有属性和方法（实例通过设置自己的__proto__指向承构造函数的prototype来实现这种继承）。

---

很显然，__proto__是很好理解的，prototype就有点绕了。

❓为什么不是（函数）Foo 而是 创造了一个 Foo. prototype加入（实例对象foo） 的原型链。

我的狭隘理解：函数觉得我堂堂一等公民，才不要跟你们普通对象一起玩，我就派我的属下 prototype代替我跟你们一起玩好了。

---

Js创建对象的两种方式：

1、{……}

let xiaoming = {
  name: 'Robot',
  height: 1.2,
  run: function () {
    console.log(this.name + ' is running...');
  }
};

2、new foo()

let func = function () {
  this.name = '属性';
};
let xiaoli = new func();

---

• JS中万物皆对象， 函数也是对象，所以既有prototype属性又有__proto__属性。

• JavaScript 没有类（class，ES6引进了这个关键字，但更多是语法糖）的概念。JS通过函数来模拟类。

• Function、Objcet、Array、…… 都是函数。

• JS是单继承的，Object.prototype是原型链的顶端。

• Function.prototype 和 Function.proto为同一对象。
  

  4ae9c5e6-c2d4-11e5-93c1-b7b0dc6d0975.png