从零开始学_JavaScript_系列（65）——class的继承(2)super、extends与多重继承

4、super关键字

4.1、作为函数时使用

当super作为函数时使用，非常简单。

1. 只允许在子类的构造函数中调用；
2. 并且需要在调用this之前调用；
3. 而且必须调用一次（除非你省略掉子类的构造函数）；

如果不符合以上要求，那么就会报错，以下是标准写法

class Foo {}class Bar extends Foo {    constructor() {        super()    }}

4.2、作为对象使用

当super关键字作为对象使用时，有几点比较特殊：

1、首先，必须放在类的函数里使用；
2、并且不能只使用super，不然在声明的时候就会报错；

原因是不知道你是把super是当做函数使用，还是当做对象使用。

class Foo {    logFoo() {        super;  // Uncaught SyntaxError: 'super' keyword unexpected here    }}

3、因此必须通过super.xx这种方式来调用；

class Foo {    logFoo() {        return super.abc;    }}(new Foo()).logFoo()    // undefined

4、super在作为对象使用时，又分为两种情况：

4.1、当位于类的普通方法时，指向父类的prototype属性（但由于不能单独调用super，因此这个无法直接通过等式来验证）。

变相验证方式如下：

class Foo {    logFoo() {        console.log("Foo.log")    }    static staticFoo() {        console.log("Foo.static")    }}class Bar extends Foo {    logBar() {        console.log('Bar.log')    }    static staticBar() {        console.log("Bar.static")    }    runSuper(key) {        try {            super[key]()        } catch (err) {            console.log("ERROR: " + err)        }    }}let bar = new Bar()bar.runSuper('logFoo')  // Foo.logbar.runSuper('staticFoo')  // ERROR: TypeError: (intermediate value)[key] is not a functionbar.runSuper('logBar')  // ERROR: TypeError: (intermediate value)[key] is not a functionbar.runSuper('staticBar')   // ERROR: TypeError: (intermediate value)[key] is not a function

以上代码表示，除了Foo本身上的方法之外，无论是Foo的静态方法，或者是Bar的普通/静态方法，都不存在。

因此可以变相说明super关键字在作为对象时，直接指向父类的prototype属性。

大约是（之所以说大约，是跟浏览器实现有关，我没具体看标准）：

super === Foo.prototype

4.2、当位于类的静态方法中时，指向父类。

和上面类似，验证代码如下：

class Foo {    logFoo() {        console.log("Foo.log")    }    static staticFoo() {        console.log("Foo.static")    }}class Bar extends Foo {    logBar() {        console.log('Bar.log')    }    static staticBar() {        console.log("Bar.static")    }    static runSuper(key) {        try {            super[key]()        } catch (err) {            console.log("ERROR: " + err)        }    }}Bar.runSuper('logFoo')  // ERROR: TypeError: (intermediate value)[key] is not a functionBar.runSuper('staticFoo')  // Foo.staticBar.runSuper('logBar')  // ERROR: TypeError: (intermediate value)[key] is not a functionBar.runSuper('staticBar')   // ERROR: TypeError: (intermediate value)[key] is not a function

会发现只能调用到父类的静态方法。而只能调用到父类静态方法的对象，只有父类本身。

因此大约是以下（之所以说大约，是跟浏览器实现有关，我没具体看标准）：

super === Foo

5、那么剩下最后一个问题，当通过super调用父类的方法时，this指向谁？

5.1、作为类的普通方法时，this指向子类的实例

class Foo {    foo() {        return this    }}class Bar extends Foo {    runSuper(key) {        return super[key]()    }}let p = new Bar()p.runSuper('foo') === p   // true

如代码，this指向子类的实例。

不过想想也正常，假如不指向子类的实例的话，那么通过this调用的一些子类的方法、变量等，那么是会报错的。

这也是es6的规定。

5.2、作为静态方法时，this指向子类

class Foo {    static staticFoo() {        return this    }}class Bar extends Foo {    static runSuper(key) {        return super[key]()    }}Bar.runSuper('staticFoo') === Bar  // true

5、extends关键字

我们在上面讨论子类继承不同父类的时候，提到extends关键字。

并且在继承一个普通的构造函数时，也可以通过extends关键字来继承。

那么，可以通过extends关键字继承其他类型么？

答案当然是可以的，但仅限于部分。

5.1、继承Object对象；

class Bar extends Object {}

讲道理说，继承这个，效果就是让Bar.__proto__ === Object，因此可以让Bar调用Object的原生方法。

可以算是对Object对象的扩展吧，如果对哪些方法不满意，可以写在Bar上，不影响Object对象本身。

但由于Object.prototype属性上没有什么特殊的东西，因此这样继承，一般没必要使用子类的实例（因为子类实例本身无法调用Object的方法）

5.2、继承Funtion

在分析这个之前，先分析一波普通函数的继承。在分析普通函数的继承之前，分析一波Function这个内置对象的原型和原型链。

前注：称prototype是原型，__proto__是原型链

如代码和注释：

// Function的原型链指向Function的原型Function.__proto__ === Function.prototype   // true// Function原型的原型链，指向Object的原型Function.prototype.__proto__ === Object.prototype   // true

以上说明Function继承于Object的原型

然后分析class的继承，如代码和注释：

class Foo {}// 说明类的原型链指向Function的原型链，相当于类Foo的构造函数就是FunctionFoo.__proto__ === Function.prototype    // trueFoo.__proto__ === Function.__proto__    // trueObject.prototype.toString.call(Foo)     // "[object Function]"Foo.constructor === Function    // true// 但类Foo的原型显然指向他自己的原型链（是一个对象），所以以下是falseFoo.prototype === Function.prototype    // false// 因为Foo.prototype是对象，所以对象的原型链向对象的原型Foo.prototype.__proto__ === Object.prototype

从以上结论可以得出，Foo是Function的实例（而非Function本身）

而假如类继承Function对象的话，是一个标准的继承，代码如下：

class Bar extends Function {}// 原型链指向对象本身Bar.__proto__ === Function  // true// 原型的原型链指向函数的原型Bar.prototype.__proto__ === Function.prototype  //true

分析：

1、因为Bar的原型链指向Function，因此Bar可以调用Function上的方法，也可以调用Function原型链上的方法（不继承的时候也可以调用原型链上的方法）；

2、因为Bar的原型的原型链指向Function的原型，因此Bar的实例的原型链的原型链指向Function的原型。

3、所以当类继承Function的时候，最大不同之处在于，类的实例可以调用被继承对象的原型链上的方法，放在这里就是可以使用Function原型链上的方法（比如apply或者call），而正常是不行的

let p = new Bar()p.apply === Function.apply      // true

6、多重继承

多重继承其实也不难，明白单一继承的方法，就好了。

多重继承有两种：

1、不算多重继承的多重继承：

比如类D要继承类A、B、C，那么先让一个空类继承类A，再让返回的结果继承类B，再让返回的结果继承类C，然后再让类D继承这个返回的结果。

这个的优点是可以按继承顺序执行每个类的构造函数。

代码略

2、通过mixin方式的继承：

还记不记得单继承是怎么做的？两条原型链，外加一个构造函数。

先创造一个新的空类，然后通过mixin的方式来将类A、B、C的prototype和__proto__属性合并到一起（就是Object.getOwnPropertyDescriptor拿各个属性，然后再通过Object.defineProperty全部添加到空类里），生成一个新类。

然后让新类被类D继承即可。

不过这种缺点是类A、B、C的构造函数没法执行（类的构造函数只能通过new这种方式来执行）。

懒得自己写代码了，给一个阮一峰的博客里的代码吧。

Mixin 模式的实现