本篇文章记录的是ES6中的let，class，extend，super，这几个与react编写过程遇到的知识
参考：阮一峰ES6
let命令
它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。例如在for循环就适合用let
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
严格模式主要有以下限制。
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀0表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface）
不存在变量提升
var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
暂时性死区
ES6明确规定，如果区块中存在 let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
var tmp = 0;
if(true) {
tmp = 2;
let tmp;
}
tmp = 0;
在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。
暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。
class的基本用法
在ES5中，大部分是通过构造函数的形式来定义类。
在es6中，新添加一种通过class构造类的方法。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
在上述定义中，constructor就是构造方法，相当与构造函数，this就是构造的实例对象
Point类除了构造方法，还定义了一个toString方法。
注意，定义“类”的方法的时候，前面不需要加上
function这个关键字，直接把函数定义放进去了就可以了。
另外，方法之间不需要逗号分隔，加了会报错。
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
class Point {
constructor(props) {
this.x = x;
this.y = y;
}
toString() {
return '(' +this.x + ', ' + this.y + ')';
}
}
var m = new Point(x = 2, y = 4);
console.log(m.toString());
//(2, 4)
在类的实例上面调用方法，其实就是调用原型上的方法。
class B {}
let b = new B();
b.constructor === B.prototype.constructor
在这个例子中，b是B的实例，B.prototype是原型，
由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
Object.assign(Point.prototype, {
toValue() {},
toString() {}
});
prototype对象的constructor属性，直接指向“类”的本身
console.log(Point === Point.prototype.constructor); //true
类的内部所有定义的方法，都是不可枚举的（non-enumerable）
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {}
}
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
class Point {
constructor(x, y) {
return Object.create(null);
}
toString() {}
}
var m = new Point();
console.log(m instanceof Point);
该例子显示定义了constructor返回的创建一个空对象，所以输出为false
类的构造函数，不使用new是没法调用的，会报错
class Point {
constructor(x, y) {
return Object.create(null);
}
toString() {}
}
var m = Point();
与ES5一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上，就是说实例输入的值是其本身属性，其他均为原型属性
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ',' + this.y + ')';
}
}
var m = new Point(1,2);
console.log(m.hasOwnProperty('x')); //true
console.log(m.hasOwnProperty('y')); //true
console.log(m.hasOwnProperty('toString')); //false
console.log(m.__proto__.hasOwnProperty('toString')); //true，记住了原型是这样的
可以通过实例的__proto__属性为Class添加方法
var m = new Point(1,2);
var n = new Point(2,8)
m.__proto__.playTime = function () {
return this.x + this.y + ' minutes';
}
console.log(m.playTime());
console.log(n.playTime());
这意味着，使用实例的proto属性改写原型，必须相当谨慎，不推荐使用，因为这会改变Class的原始定义，影响到所有实例。
Class不存在变量提升（hoist），这一点与ES5完全不同。要先定义后使用，否则报错。
因为ES6不会把类的声明提升到代码头部。
{
let Foo = class {};
class Bar extends Foo {
}
}
上面的代码不会报错，因为Bar继承Foo的时候，Foo已经有定义了。但是，如果存在class的提升，上面代码就会报错，因为class会被提升到代码头部，而let命令是不提升的，所以导致Bar继承Foo的时候，Foo还没有定义。
Class表达式
类的名字是MyClass,Me只在内部有定义，所以Me是可以省略的
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
let inst = new MyClass();
console.log(inst.getClassName());
console.log(Me.name);
this的指向
类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了
class Logger {
constructor() {
this.printName = this.printName.bind(this);
}
// ...
}
另一种解决方法是使用箭头函数
class的继承
Class之间可以通过extends关键字实现继承
class ColorPoint extends Point {}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。
constructor(...args) {
super(...args);
}
另一个需要注意的地方是，在子类的构造函数中，只有调用 super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}
super
super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
-
第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
class A {} class B extends A { constructor() { super(); } }
上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。
- 第二种情况，
super作为对象时，指向父类的原型对象
这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的
不过，如果属性定义在父类的原型对象上，super就可以取到
