React里用到的ES6语法

1，箭头函数

箭头函数相当于匿名函数，简化了函数的定义

格式：

单条语句（可以省略{}和return）

eg:x=>x*x //单个参数

  （x，y）=>x + y  //多个函数

   x => ({ foo:x}) //返回对象（在对象外面有个（））

多条语句（不能省略{}和return）

this的指向：

不用箭头函数，this指向window或者undefined

用箭头函数，this指向词法作用域，在下面的函数中词法作用域就是obj对象

注意事项：

在ES6中，会默认采用严格模式，因此this也不会自动指向window对象了，而箭头函数本身并没有this，因此this就只能是undefined，这一点，在使用的时候，一定要慎重慎重再慎重，不然踩了坑你都不知道自己错在哪！这种情况，如果你还想用this，就不要用使用箭头函数的写法。

改正：

参考ES6官网和https://blog.youkuaiyun.com/yangxiaodong88/article/details/80460332

 

2，类

写法：

实例属性除了在constructor方法里面定义，也可以直接写在类的最顶层。

//写在最顶层
class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

//写在constructor方法里
class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

 

在类和模块内部默认是严格模式

Constructor：构造方法，是类的默认方法，当定义了一个空的constructor时，

this代表实例对象

定义类的方法时，不需要加function这个关键字，直接讲函数定义放进去，也不需要用逗号分隔。

生成的实例对象的写法，使用new命令，

eg：var newPoint=new Point(1 , 2); //实例

newPoint.toString()  //( 1 , 2 )       

class表达式

上面代码使用表达式定义了一个类，需要注意的是，这个类的名字MyClass而不是Me,Me只在Class的内部代码可用。

立即执行class

this的指向：默认指向类的实例，单独使用该方法时会报错

Class的取值函数（getter）和存值函数（setter）

Class的静态方法：static关键字（加上static关键字，表示该方法不会被继承）

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

Class的继承：用extends方法，当调用父类的方法是用super关键字

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

 注意：如果子类中定义了constructor方法，就必须得调用super关键字，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错；如果没有显式定义constructor方法，这个方法会默认添加

 

-----备注:未写完,之前写的额,先发出来,后面补