【本文转载自js中ES6语法的super到底是什么? - 简书,仅供本人学习时查阅,若有任何侵权请联系我删除,非常抱歉,在此感谢无偿分享技术资料的前端大佬们!】
ES6 中的继承和 super 的用法大家都不会陌生,可是一问到 super 到底是什么,估计很对人都会回答不上来。在 ES6 中,super 是一个特殊的语法,而且它比 this 还要特殊,有很多用法上的限制。
super类似于ES5语法中的call继承
class A{
constructor(n){
console.log(n); //=>100;
this.x = 100;
}
getX(){
console.log(this.x);
}
}
class B extends A{//=>extends 类似实现原型继承
constructor(){
super(100);//=>类似于call的继承:在这里super相当于把A的constructor给执行了,并且让方法中的this是B的实例,super当中传递的实参都是在给A的constructor传递。
this.y = 200;
}
getY(){
console.log(this.y);
}
}
let f = new B();
super用法
- 既然 super 是一个可以调用的东西,它是一个函数么?
这个问题的答案很容易找到,可以把 super 赋值到其它变量试试,会得到一个语法错误。
class A extends Object {
constructor() {
const a = super; //=>Uncaught SyntaxError: 'super' keyword unexpected here
a();
}
};
因为 super 的词法定义是伴随后面那对括号的,它和 this 不同。this 的定义是 this 这个关键字会被替换成一个引用,而 super 则是 super(…) 被替换成一个调用。而且 super 除了在 constructor 里直接调用外还可以使用 super.xxx(…) 来调用父类上的某个原型方法,这同样是一种限定语法。
class A {
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log('name:' + this.name + ',color:' + this.color);
}
}
class B extends A{
constructor() {
super('cat','white');
}
toString() {
console.log(super.toString());
}
}
var cat = new B()
cat.toString(); //=>name:cat,color:white
作者:XJIAL88
链接:https://www.jianshu.com/p/2a5a7352f4e5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。