在react当中 箭头函数和普通函数的区别

最近在做项目中遇到一个问题：
onclick = {a.b} 会导致找不到a.b方法的内部的this丢失

1.导致我们在onclick里面找不到this

JavaScript自身特性说明:
如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。
从最开始bind(this) 到stage2的箭头函数

class Foo extends React.Component {
  constructor (super) {
    //this.a = this.a.bind(this) // 老写法
  }
  a() {
    console.log(1);
  }
  b = () => {
    console.log(1);
  }
  render(){
    <div>
      <div onClick={this.a.bind(this)}></div> // 老写法
      <div onClick={this.b}></div> // 新写法
    </div>
  }
}

React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串，而是一个函数,onClick即是中间变量，所以处理函数中的this指向会丢失。

箭头函数除了代码少。与普通函数最大的不同就是。this是由声明该函数时候定义的。一般是隐性定义为声明该函数时的作用域this。

阮一峰ES6--箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

为什么箭头函数不能作构造函数,不能使用new?
构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子,
因为箭头函数没有this,而new的过程如下

// 1.构造一个空对象
// 2.把空对象的原型指向构造函数的原型对象
// 3.把空对象赋值给this
// 4.进行this初始化
// 5.返回this
function Function(name,age){
    let obj={};
    obj.__proto__=Function.prototype;
    this=obj;
    this.name=name;
    this.age=age;
    return this;
}

所以 箭头函数不能被当做构造函数使用