详解es6 class语法糖中constructor方法和super的做用

       大多数面向对象的编程语言都支持类和类继承的特性，而JS却不支持这些特性，只能经过其余方法定义并关联多个类似的对象，这种状态一直延续到了ES5。因为相似的库层出不穷，最终仍是在ECMAScript 6中引入了类的特性。本文将详细介绍ES6中的类，ES6 的 class 属于一种“语法糖”，因此只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。

function Point(x, y) {
  this.x = x;
  this.y = y;
}
 
Point.prototype.toString = function() {
  return '(' + this.x + ',' + this.y + ')';
}

等同于

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
 
  toString() {
    return '(' + this.x + ',' + this.y + ')';
  }
}

其中 constructor 方法是类的构造函数，是一个默认方法，经过 new 命令建立对象实例时，自动调用该方法。一个类必须有 constructor 方法，若是没有显式定义，一个默认的 consructor 方法会被默认添加。因此即便你没有添加构造函数，也是会有一个默认的构造函数的。通常 constructor 方法返回实例对象 this ，可是也能够指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例。

下面好好分析一下 super 关键字的做用：

super 这个关键字，既能够当作函数使用，也能够当作对象使用。这两种状况下，它的用法彻底不用。

1. 当作函数使用

class A {}
class B extends A {
  constructor() {
    super();  // ES6 要求，子类的构造函数必须执行一次 super 函数，不然会报错。
  }
}

注：在 constructor 中必须调用 super 方法，由于子类没有本身的 this 对象，而是继承父类的 this 对象，而后对其进行加工,而 super 就表明了父类的构造函数。super 虽然表明了父类 A 的构造函数，可是返回的是子类 B 的实例，即 super 内部的 this 指的是 B，所以 super() 在这里至关于 ```A.prototype.constructor.call(this, props)``。

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

能够看到，在 super() 执行时，它指向的是 子类 B 的构造函数，而不是父类 A 的构造函数。也就是说，super() 内部的 this 指向的是 B。

2. 当作对象使用

在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

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

　　上面代码中，子类 B 当中的 super.c()，就是将 super 看成一个对象使用。这时，super 在普通方法之中，指向 A.prototype，因此 super.c() 就至关于 A.prototype.c()。

 

经过 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

上面代码中，super.s() 虽然调用的是 A.prototytpe.s()，可是 A.prototytpe.s()会绑定子类 B 的 this，致使输出的是 2，而不是 1。也就是说，实际上执行的是 super.s.call(this)。

 

因为绑定子类的 this，因此若是经过 super 对某个属性赋值，这时 super 就是 this，赋值的属性会变成子类实例的属性。

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

上面代码中，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); // 报错
  }
}

上面代码中，console.log(super); 的当中的 super，没法看出是做为函数使用，仍是做为对象使用，因此 JavaScript 引擎解析代码的时候就会报错。这是，若是能清晰的代表 super 的数据类型，就不会报错。

最后，因为对象老是继承其余对象的，因此能够在任意一个对象中，使用 super 关键字。

结语：ES6 的 class 毕竟是一个“语法糖”，因此只要理解了 JavaScript 中对象的概念和面向对象的思想，class 就不难理解啦。