知识储备

原型链.png

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

我们知道 js 并没有类的概念，所谓的类是在原型链的基础之上。例如我们通常所使用的 function 实际上是继承于 Function 类的对象。

function fool(a, b) {
  return a + b
}

var fool = new Function("a, b", "return a+b");

两者所做的事情是相同的，函数 fool 其实是 Function 的一个实例，也就是说 fool.__proto__ === Function.prototype的返回值是 true。

于是问题来了，Function 的构造函数是如何生成的呢？

同时我们知道 Function 并不是这一条原型链的终点，Function 是继承于 Object 的。

那么问题又来了 Object 的构造函数是如何生成的呢？

ECMA中关于 Object 的构造函数是这么描述的：

ECMA.png

是内置对象 %Object%，同样的 Function 的 constructor 也是内置对象 %Function%，事实上这个问题也不重要。我们只需要知道 这两个 constructor 都不是 Function 的实例即可。

原型继承

有对象的概念，就会有子类的概念。在 ES2015 中，新增了 关键字 extends。

class ChildClass extends ParentClass { ... }

我们只知道 extends 的作用相当于从 ChildClass 的原型链上可以获取 ParentClass 的原型对象，但是具体做了什么事情呢？
首先我们要明白，如何创建子类。

js权威指南p230.png

核心内容: B的实例继承自B.prototype，后者同样也要继承自A.prototype。

我们知道 B.prototype 和 A.prototype 究其根本 都是 对象(Object)，那对象的继承概念是什么？

js权威指南p121.png

于是我们自然而然的写下两行代码，

B.prototype  = new A();
B.prototype.constructor = B;

此时我们开始起草我们的 继承方法 inherit。

  function inherit(SuperClass, ChildClass) {

    ChildClass.prototype = new SuperClass();
    ChildClass.prototype.constructor = ChildClass;

    return ChildClass

  }

我们再看看 babel 里对 extends 的实现:

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass)
      :
      subClass.__proto__ = superClass;
}

这里使用了Object.create方法。

image.png
这里其实和以下代码类似，只不过回避了对父类构造函数的调用(父类构造函数内如果有生成实例属性的话，也将在原型链继承了)不至于产生多余的属性。

let obj = new superClass();
obj.constructor = subClass
subClass.prototype = obj

如果要在继承时回避对父类构造函数的调用又不使用 Object.create 方法，可以使用过桥函数，如下代码。

  function inherit2(SuperClass, ChildClass) {
    function F() {
    }

    F.prototype = SuperClass.prototype;

    ChildClass.prototype = new F();
    ChildClass.prototype.constructor = ChildClass;

    return ChildClass;

  }

总结: 其实构造函数的 prototype 就是个普通的对象，只不过他具有特殊意义，同时这个对象 有个 constructor 属性(不是必须的)，这个属性指向构造函数本身。

.prototype or .__proto__

babel 里对 extends 的实现时还有一句如下代码：

  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass)
      :
      subClass.__proto__ = superClass;

说实话我现在不是很能理解其中的意味？毕竟已经使用 Object.create 继承过了，再设置一遍是否多余？

于是我想简单易懂的谈谈 .prototype or .__proto__。

• .prototype
  这个属性似乎是只有函数（构造函数其实和普通函数没有区别，只是我们会用 new 去调用）才有的。

• .__proto__
  这个属性只要是对象(函数也是对象)都有。

    class Parent {}

    class Child extends Parent {}

    let c1 = new Child()

    let par = {key:1};

    let c2 = Object.create(par)

    /*这里输出应该是 Function 的内容，这里 parent 做为Function 的实例，输出的内容是 Function*/
    console.log(Parent.__proto__) //ƒ () { [native code] }

    /*这里 Child 也类似于做为 Parent 的实例，输出的内容是 Parent*/
    console.log(Child.__proto__)//class Parent {}

    /*这里 c1 做为 Child 的实例，输出的内容是 Child.prototype */
    console.log(c1.__proto__) // Parent {constructor: ƒ}

    /*这里输出了 Object.prototype,因为 par 是 Object的实例*/
    console.log(par.__proto__)  //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

    /*这里输出的 是 c2继承的对象 也就是 par */
    console.log(c2.__proto__) //{key: 1}

总结： 函数对象的 __proto__ 指向其 继承的函数/Function.prototype；对象的 __proto__指向其 继承的对象/构造函数的prototype。函数对象的prototype.是一个继承了 其父级函数的 实例（这句话想表达的意思是 Child.prototype.__proto__ === Parent.prototype）。

对象的 __proto__属性是 【非标准的】 但许多浏览器已经实现的属性，现在可以通过标准的Object.getPrototypeOf()和Object.setPrototypeOf()访问器来访问对象的原型。