JavaScript学习日记 : Day19 - Class继承

1. extend

class Animal {
    constructor(name = "Animal",lag = 4) {
        this.name = name;
        this.lag = lag;
    }
    
    run(lag) {
        if(lag) {
            this.lag = lag
        }
        console.log(`${this.name}用${this.lag}只脚跑步!`)
    }
    stop() {
        console.log(`${this.name}静止不动!`)
    }
}

let animal = new Animal("first animal")

接下来如果想要创建另外一个cat class，可以基於class animal做延伸，因为animal里面的method都是可以套用在cat身上的:

class Cat extends Animal {
    jump() {
        console.log(`${this.name} hide!`)
    }
}

let cat = new Cat("White cat")
cat.run(4); // White cat用4只脚跑步!

2. 重复的函数

假设在class Cat中有跟class Animal相同的函数，那cat会优先取用Cat.prototype中的方法:

class Cat extends Animal {
    jump() {
        console.log(`${this.name} hide!`)
    }
    stop() {
        console.log(`${this.name}静止跑步!`)
    }
}

let cat = new Cat("White cat")
cat.stop(); // White cat静止跑步!

如果要取用Animal的stop函数可以使用super(...):

class Cat extends Animal {
    jump() {
        console.log(`${this.name} hide!`)
    }
    stop() {
        super.stop();
    }
}

let cat = new Cat("White cat")
cat.stop(); // White cat静止不动!

2.1 箭头函数没有super

class Cat extends Animal {
    jump() {
        console.log(`${this.name} hide!`)
    }
    stop() {
        setTimeout(() => super.stop(),1000)
    }
}

let cat = new Cat("White cat")
cat.stop(); // White cat静止不动!

如果是以function的形式则会报错:

class Cat extends Animal {
    jump() {
        console.log(`${this.name} hide!`)
    }
    stop() {
        setTimeout(function() {super.stop()},1000)
    }
}

let cat = new Cat("White cat")
cat.stop(); // 'super' keyword unexpected here

3. 定义自己的constructor

上面例子中class Cat的constructor都是继承class Animal的:

console.log(Cat.constructor===Animal.constructor)

如果直接新增constructor，以下写法会报错:

class Animal {
    constructor(name = "Animal",lag = 4) {
        this.name = name;
        this.lag = lag;
    }
    
    run(lag) {
        if(lag) {
            this.lag = lag
        }
        console.log(`${this.name}用${this.lag}只脚跑步!`)
    }
    stop() {
        console.log(`${this.name}静止不动!`)
    }
}

class Cat extends Animal {
    constructor(name = "Animal",lag = 4,color = white) {
        this.name = name;
        this.lag = lag;
        this.color = color;
    }
    jump() {
        console.log(`${this.name} hide!`)
    }
}

let cat = new Cat(); // Must call super constructor in derived class before accessing 'this' or returning from derived constructor

extend的class如果要新增自己的constructor必须调用super，而且要在使用this之前:

class Animal {
    constructor(name = "Animal",lag = 4) {
        this.name = name;
        this.lag = lag;
    }
    
    run(lag) {
        if(lag) {
            this.lag = lag
        }
        console.log(`${this.name}用${this.lag}只脚跑步!`)
    }
    stop() {
        console.log(`${this.name}静止不动!`)
    }
}

class Cat extends Animal {
    constructor(name,lag,color = 'white') {
        super(name,lag);
        this.color = color;
    }
    jump() {
        console.log(`${this.name} hide!`)
    }
}

let cat = new Cat();
console.log(cat.color); // white