ES6 Class 中的 super 关键字

113 阅读1分钟

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 赋值到其它变量试试,会得到一个语法错误。

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() {
      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