JS笔记之JS类(二)

1 类的继承, 使用“extends” 关键字

语法

class Child extends Parent {
    someMethods(){
        console.log('继承');
    }
}

例如：

// 构建一个动物类，有动物的一些方法属性，
class Animal {
    constructor(name) {
        this.speed = 0;
        this.name = name;
    }
    run(speed) {
        this.speed = speed;
        console.log(`${this.name} runs with speed ${this.speed}.`);
    }
    stop() {
        this.speed = 0;
        console.log(`${this.name} stands still.`);
    }
}

let animal = new Animal("My animal");


class Rabbit extends Animal {
    hide() {
        console.log(`${this.name} hides!`);
    }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

在内部，关键字 extends 使用了原型的机制工作，他将Rabbit.prototype.[[prototype]]设置为了Animal.prototype，所以在Rabbit中找不到的方法，会自动去他的原型链上去寻找。

extends 后面可以根任意的表达式，例如：

function f(phrase) {
    return class {
        sayHi() { alert(phrase); }
    };
}

class User extends f("Hello") { }

new User().sayHi(); // Hello

根据许多条件使用函数生成类，并继承它们时来说可能很有用。

2 重写类的方法

完全重新类的方法，直接在子类中定义名称相同的方法名即可，

class Rabbit extends Animal {
    stop() {
        // ……现在这个将会被用作 rabbit.stop()
        // 而不是来自于 class Animal 的 stop()
    }
}

但是我们通常都只是想扩展一下，父类的方法。JS提供了 super 关键字。使用 super.method() 来调用一个父类。使用 super()一个父类的constructor。

class Rabbit extends Animal {
    hide() {
        console.log(`${this.name} hides!`);
    }

    stop() {
        super.stop(); // 调用父类的 stop
        this.hide(); // 然后 hide
    }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White Rabbit hides!

箭头函数没有super，如果被访问他从外部获取，例如：

class Rabbit extends Animal {
    stop() {
        setTimeout(() => super.stop(), 1000); // 1 秒后调用父类的 stop
    }
}

3 重写 constructor

如果一个类继承了一个父类，但是没有重写constructor，那么他的constructor，默认是：

class Rabbit extends Animal {
    // 为没有自己的 constructor 的扩展类生成的
    constructor(...args) {
        super(...args);
    }
}

现在我们设置自己子类的constructor，但是有一定的要求：

继承类的constructor，必须调用 super()。
并且一定要在this 之前调用。

class Rabbit extends Animal {
	
    constructor(name, earLength) {
        super(name);
        this.earLength = earLength;
    }

    // ...
}

4 重写类字段

一般错误的实现方法：

class Animal {
    name = 'animal';

    constructor() {
        console.log(this.name); // (*)
    }
}

class Rabbit extends Animal {
    name = 'rabbit';
}

new Animal(); // animal
new Rabbit(); // animal