2021-07-14

es6 class 中constructor和super

1.JavaScript语言的传统方法是通过构造函数，定义并生成新对象

function Parent(name) {
  this.name = name
}

Parent.prototype.sayHi = function () {
  console.log('hi, ' + this.name)
}

基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。上面的代码用ES6的“类”改写，就是下面这样

  class Parent {
      constructor(x, y) {
        this.name = name
      }

      sayHi() {
        console.log('hi, ' + this.name)
      }
    }

其中 constructor 方法是类的构造函数，是一个默认方法，通过 new 命令创建对象实例时，自动调用该方法。一个类必须有 constructor 方法，如果没有显式定义，一个默认的 consructor 方法会被默认添加。所以即使你没有添加构造函数，也是会有一个默认的构造函数的。一般 constructor 方法返回实例对象 this ，但是也可以指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例。

2.super关键字

• 描述：super关键字用于访问和调用一个对象的父对象上的函数。在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数

• 语法：

super([arguments]);
// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法

class Child extends Parent {
 constructor(name) {
   super(name);
 }
}

var a = new Child('suoyuan')
console.log(a) //Child {name: "suoyuan"}
console.log(a.name) //suoyuan
a.sayHi() //hi, suoyuan    

3.super当作函数使用：super() 内部的 this 指向的是它所在的类

    class A {
      constructor() {
        console.log(new.target.name); // new.target 指向当前正在执行的函数
      }
    }

    class B extends A {
      constructor() {
        super();
      }
    }
    new A(); // A
    new B(); // B

注：在 constructor 中必须调用 super 方法，因为子类没有自己的 this 对象，而是继承父类的 this 对象，然后对其进行加工,而 super 就代表了父类的构造函数。super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，即 super 内部的 this 指的是 B，因此 super() 在这里相当于 A.prototype.constructor.call(this, props)。

4.super当做对象使用

• 指向父类的原型对象,super.c() 就相当于 A.prototype.c()

  class A {
      c() {
        return 2;
      }
    }
    class B extends A {
      constructor() {
        super();
        console.log(super.c()); // 2
      }
    }
    new B()

• 通过 super 调用父类的方法时，super 会绑定子类的 this。

class A {
  constructor() {
    this.x = 1;
  }
  s() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.s();
  }
}

let b = new B();
b.m(); // 2

  class A {
      constructor() {
        this.x = 1;
      }
    }

    class B extends A {
      constructor() {
        super();
        this.x = 2;
        super.x = 3;
        console.log(super.x); // undefined
        console.log(this.x); // 3
      }
    }

    let b = new B();

由于绑定子类的 this，所以如果通过 super 对某个属性赋值，这时 super 就是 this，赋值的属性会变成子类实例的属性,上面代码中，super.x 赋值为 3，这时等同于对 this.x 赋值为 3。而当读取 super.x 的时候，调用的是 A.prototype.x，但并没有 x 方法，所以返回 undefined。

• 使用 super 的时候，必须显式指定是作为函数，还是作为对象使用，否则会报错

class A {}
class B extends A {
  constructor() {
    super();
    console.log(super); // 报错
  }
}