如何理解es6中的class，以及class中的constructor函数

Question

看了一些书，书中说JavaScript没有类的概念，后来es6中引入class语法，但是并没有充分理解class，很多人说这只是一个语法糖，没能很好的解决面向对象的问题。在构建react的时候有如下写法class Tabs extend Component{constructor(props){     super(props) }}请同时解释一下super的意思

Answer 1

首先，“语法糖”的意思是现有技术本可以实现，但是采用某种写法会更加简洁优雅。最常见的就是声明对象采用的就是语法糖 var a={b:111}。
ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

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中必须调用 super方法，子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。super代表了父类构造函数。对于你的实例相当于执行Component(props)。但是注意，此处this指向 子类。更严谨的是相当于

Component.prototype.constructor.call(this,props)。

至于为什么一定要有super？可以很容易想得到，先有父才有子嘛。super继承父类属性，在constructor中进行自己的改造。