箭头函数

第一组情景：

//setTimeout的第一个参数是一个函数
setTimeout(function(){console.log('这是一个普通函数'+this)},1000)
setTimeout(()=>{console.log('这是一个箭头函数'+this)},1000)

输出的结果为：

这是一个普通函数[object Window]
这是一个箭头函数undefined

第二组情景：
这是使用了React向页面中渲染两个按钮

 <button onClick={function(){console.log(this)}}>点击function</button>
 <button onClick={()=>{console.log(this)}}>点击()=>{}</button>

输出的结果为：
依次点击点击function、点击()=>{}按钮
EventTest是我创建的一个组件

undefined
EventTest {props: {…}, context: {…}, refs: {…}, updater: {…}, click: ƒ, …}

解析：

1. 在第一组场景中
   当没有使用箭头函数时，this的指向是接收函数的对象
   因为setTimeout是Window的方法，函数的完整写法应该是window.setTimeout，所以这里的this是Window（接收函数的对象）
   当使用了箭头函数时，this的指向是所在对象上一级的对象，在这里的window.setTimeout中并没有上一级的对象，所以这里的this是undefined（所在对象上一级的对象）
2. 在第二组场景中
   没有使用箭头函数的按钮，这里的this指向的就是接收函数的对象，而这里的对象是一个jsx语法组成的虚拟DOM对象，这个对象并没有提供this，所以这里的this是undefined
   使用了箭头函数的按钮，这里的this指向的是所在对象上一级的对象，这里的对象是一个jsx语法组成的虚拟DOM对象，而这个虚拟DOM对象属于class EventTest这个类，而这个类有提供this，所以这里的this是EventTest
   总结：
   箭头函数使用来解决this指向问题的
   使用了箭头函数，this的指向就会由原来的接收函数的对象，变为上一级的对象，这样可以使得方法的this都指向根对象，使得方法都可以访问根对象上的数据或方法