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

矫情吗；* 2022-06-07 23:37 228阅读 0赞

### 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.log
    bar.runSuper('staticFoo')  // ERROR: TypeError: (intermediate value)[key] is not a function
    bar.runSuper('logBar')  // ERROR: TypeError: (intermediate value)[key] is not a function
    bar.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 function
    Bar.runSuper('staticFoo')  // Foo.static
    Bar.runSuper('logBar')  // ERROR: TypeError: (intermediate value)[key] is not a function
    Bar.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的构造函数就是Function
    Foo.__proto__ === Function.prototype    // true
    Foo.__proto__ === Function.__proto__    // true
    Object.prototype.toString.call(Foo)     // "[object Function]"
    Foo.constructor === Function    // true
    
    // 但类Foo的原型显然指向他自己的原型链（是一个对象），所以以下是false
    Foo.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继承这个返回的结果。

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

代码略