ES6（七）Class的继承（下）

目录

前言

一、extend关键字

1、语法

2、实例

二、super关键字

1、含义

2、语法

3、实例

4、结果验证

5、要点

（1）注意项

（2）个人理解

（3）错误示范

（4）结果验证

结束语

---

前言

这篇文章小糖将给大家分享Class最常用的继承（懒惰使小糖又拖了好久呜呜呜），相比ES5，ES6的继承通过使用关键字使得实现继承更加清晰方便。继承，小糖认为这与封装调用一个函数类似，类class_1的所有函数与方法让class_2使用，相当于封装一个函数然后调用修改；优点也一样，减少代码量，避免数据结构冗杂

一、extend关键字

1、语法

通过使用extends关键字实现继承（比ES5清晰方便许多）

      class father {          //定义一个类
}

      class son extends father {
}                                  //通过extend继承

  //两者均没有代码，相当于复制一个father

2、实例

class plus {          //定义一个类
    constructor(){

    }
    print () {
        console.log("plus的方法");
    }

}

class mini extends plus {

} 

var Mini = new mini();
Mini.print();

 

二、super关键字

1、含义

表示父类的构造函数，用来新建父类的this对象。

2、语法

 

3、实例

class num {          //定义一个类
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum(){
        alert('结果为：' + this.x + this.y);
    }
}

class one extends num {
    constructor(x,y){
        super();
        this.x = x;
        this.y = y;
        //or
        //super(x,y);
    }
} 

var One = new one(1,2);
One.sum(); 

4、结果验证

 

5、要点

（1）注意项

必须应用在子类的construtor构造函数上，且必须在this之前。

（2）个人理解

super表示引入父类的构造函数，所以必须放在子类中的可构造函数中；因为super引用父类是为了使用父类中的this对象，而不是子类的this对象，此时就应该先声明super，将super后面的this转为指向父类。

（3）错误示范

(取上实例父类num)

//super在this之后的错误

class one extends num {
    constructor(x,y){
        this.x = x;
        this.y = y;
        super();
    }
} 

var One = new one(1,2);
One.sum(); 

（4）结果验证

 
教训：在子类的构造函数中，只有调用super之后，才可以使用this关键字！！！

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注，小糖后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤