原文地址:https://www.web-tinker.com/article/21291.html
说起 ES6 的继承和 super 的用法大家都不会陌生,可是一问到 super 到底是什么,很多人就支支吾吾。也许在别的编程语言中 super 和 this 一样,都是一个指针,可以像一般变量一样使用。但是在 ES6 中,super 是一个特殊的语法,而且它比 this 还要特殊,有很多用法上的限制。
第一,既然 super 是一个可以调用的东西,它是一个函数么?
第二,对于 extends 的 class,constructor 里可以没有 super 么?
第一个问题的答案很容易找到,可以把 super 赋值到其它变量试试,会得到一个语法错误。
<script>
class A extends Object {
constructor() {
const a = super;
a();
}
};
</script>
Uncaught SyntaxError: 'super' keyword unexpected here
因为 super 的词法定义是伴随后面那对括号的,它和 this 不同。this 的定义是 this 这个关键字会被替换成一个引用,而 super 则是 super(…) 被替换成一个调用。而且 super 除了在 constructor 里直接调用外还可以使用 super.xxx(…) 来调用父类上的某个原型方法,这同样是一种限定语法。
<script>
class A extends Array {
push(...args) {
args.forEach(item => super.push(item + 1));
}
}
let a = new A();
a.push(1, 2, 3);
console.log(a); // [2, 3, 4]
</script>
所以要是问 super 是什么,它只是一个关键字而已。用法应该是 super(…) 或者 super.xxx(…) 才对。
第二个问题实际上是问 super(…) 到底做了什么。其实 super(…) 做的事情就是生成一个 this。因为在原型继承中,如果一个类要继承自另一个类,那就得先实例化一次它的父类作为作为子类的原型。如果不做这件事,子类的原型就不能确定,当然也就无法创建 this。所以如果在 constructor 中没有 super(…) 就企图获取 this 就会报错。
Uncaught ReferenceError: this is not defined
<script>
class A {}
class B extends A {
constructor() {}
}
new B(); // throw
</script>
其实 constructor 中是可以没有 super(…) 的,它只不过是用来生成 this 的而已。如果只想继承原型,而根本不想管父类的构造器,可以完全避开 this,在 constructor 中手动返回一个对象,比如:
<script>
class A {
get one() { return 1; }
}
class B extends A {
constructor() {
return Object.create(new.target.prototype);
}
get two() { return 2; }
};
let b = new B();
console.log(b.one, b.two); // 1 2
</script>