JS类的继承

ES6中原生支持了类继承机制。虽然类继承使用的是新语法，但背后依然使用的是原型链。

1.继承基础

ES6中的类支持单继承。使用extends关键字，就可以继承任何拥有constructor和原型的对象。很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数：

class Animal {}
// 继承类
class People extends Animal {}
let p = new People()
console.log(p instanceof People);    // true
console.log(p instanceof Animal);    // true

function Vehicle (){}
// 继承普通构造函数
class Bus extends Vehicle{}
let b = new Bus()
console.log(b instanceof Bus);    // true
console.log(b instanceof Vehicle);    // true

 还可以这么用：

let Bar = class extends Foo {}

2.构造函数、HomeObject和super()

（1）super

派生类的方法可以通过super关键字引用它们的原型。super只能在派生类中使用，而且仅限于类构造函数、实例方法和静态方法内部。

class Vehicle {
    constructor () {
        this.hasEngine = true
    }
}

class Bus extends Vehicle {
    constructor(){
        super() // 相当于super.constructor()

        console.log(this instanceof Vehicle);    // true
        console.log(this);    // Bus { hasEngine: true }
    }
}

new Bus()

使用super注意事项：

• 不要在super()之前引用this，否则会抛出 ReferenceError
• super只能在派生类构造函数和静态方法中使用
• 不能单独引用super关键字，要么用它调用构造函数，要么用它引用静态方法
• 调用super会调用父类构造函数，并将返回的实例赋值给this
• super() 的行为如同调用构造函数，如果需要给父类构造函数传参，则需要手动传入

  •         class Vehicle {
                constructor(title) {
                    this.title = title
                }
            }
    
            class Bus extends Vehicle {
                constructor(title) {
                    super(title)
                }
            }
    
            console.log(new Bus('床前明月光'))    // Bus {title: "床前明月光"}

• 如果没有定义类构造函数，在实例化派生类时会调用super()，且会传入所有传给派生类的参数

  •         class Vehicle {
                constructor(title) {
                    this.title = title
                }
            }
    
            class Bus extends Vehicle {}
    
            console.log(new Bus('床前明月光'))    // Bus {title: "床前明月光"}

• 如果在派生类追踪显式定义了构造函数，则要么必须在其中调用super()，要么必须在其中返回一个对象。

  •         class  Vehicle {}
    
            class Car extends Vehicle {}
            
            class Bus extends Vehicle {
                constructor () {
                    super()
                }
            }
    
            class Van extends Vehicle {
                constructor () {
                    return {}
                }
            }
    
            console.log(new Car());    // Car {}
            console.log(new Bus());    // Bus {}
            console.log(new Van()); // {}

  • 否则将会报如下错误：
    • 

可以在静态方法中通过super调用继承的类上定义的静态方法：

class Vehicle {
    static identify() {
        console.log('vehicle');
    }
}

class Bus extends Vehicle {
    static identify(){
        super.identify()
    }
}

Bus.identify()  // vehicle

（2）HomeObject

ES6给类构造函数和静态方法添加了内部特性[[HomeObject]]，这个特性是一个指针，指向定义该方法的对象。这个指针是自动赋值的。且只能在JavaScript引擎内部访问。super始终会定义为[[HomeObject]]的原型