前端提高篇(127):es6类的继承

es5继承

es5要继承，是这样的：

function Animal(name){
     
    this.name = name;
    this.thirsty = 100;
    this.food = [];
}
Animal.prototype.drink = function(){
     
    this.thirsty -= 10;
    return this;
}
Animal.prototype.eat = function(value){
     
    this.food.push(value);
    return this;
}

function Dog(name, age){
     
    Animal.call(this, name); // 继承Animal
    this.age = age;
}
// Dog.prototype = Animal.prototype; //Dog与Animal的原型指向相同，Dog和Animal对象的原型就一样了
Dog.prototype = Object.create(Animal.prototype);//Dog对象的原型是一个空对象，Dog原型的原型是Animal
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
     
    console.log(`我是${
       this.name}`);
}

let lili = new Dog("lili", 2);

方法的使用：

查看原型：

es6继承

es6中引入了关键字：extends和super，仿类结构，方便地继承
可以继承父类的方法，也可以有自己的方法

class Animal {
     
    constructor(name){
     
        this.name = name;
        this.thirsty = 100;
        this.food = [];
    }
    drink(){
     
        this.thirsty -= 10;
        return this;
    }
    eat(item){
     
        this.food.push(item);
        return this;
    }
}
class Dog extends Animal {
     
    constructor(name, age){
     
        super(name);
        this.age = age;// 必须super，super之后子类才能使用this
    }
    bark(){
     
        console.log(`我是${
       this.name}`);
    }
}

let lili = new Dog("lili", 2);

效果一致：

静态方法的继承

父类有的静态方法，子类也有
给父类Animal添加一个静态方法，用关键字static，子类不动

效果：父类Animal和子类Dog均可以使用该静态方法(静态方法直接由类调用，对象不可调用)

继承内置构造函数

class movieArr extends Array {
     
    constructor(name, ...movies){
     
        super(...movies); // 相当于new Array(...movies)
        this.name = name;
    }
    add(item){
     
        this.push(item);
    }//由于继承了Array，所以可以直接使用this.push添加数组
    topScore(limit){
     
        return this.sort( (a, b) => a.score > b.score ? -1 : 1 ).slice(0,limit);
    }// 评分从高到低排序，由用户指定要top几位
}

let movies = new movieArr("我喜欢的动漫",
    {
     "name":"斗罗大陆",score:9.3},
    {
     "name":"斗破苍穹",score:9.1},
    {
     "name":"狐妖小红娘",score:9.6},
    {
     "name":"吞噬星空",score:8.7},
); //评分仅为当前数据

效果：对象内容一项项地添加到数组里
排序是按评分从高到低排序