目录
前言
这篇文章小糖将给大家分享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关键字!!!
结束语
希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注,小糖后续也会持续发布新文章,祝大家学有所成!
欢迎各位前端大佬留言讨论指教! 小糖谢谢各位啦~❤ ❤ ❤ ❤