一、 箭头函数是匿名函数的另一种表达形式，简化写法。
// 普通函数
const fun = function() {}
// 把匿名函数的引用地址赋值给了fun变量
转换成箭头函数就是如下的写法：
// 箭头函数
const fun = () => {}
继续举例
const oDiv = document.querySelector('div');
// 普通函数
oDiv.addEventListener('click' , function() {})
// 箭头函数
oDiv.addEventListener('click' , () => {})
二、关于this指向（执行期上下文对象）
温故而知新：this 指针，是一个与执行上下文相关的特殊对象，也被称之为上下文对象。
- 在全局环境（全局执行上下文）中（在任何函数体外部的代码），this 始终- 指向全局对象(window，严格模式下是undefined)
- 在函数环境（函数执行上下文）中，this的值取决于函数的调用方式，如果被一个对象调用，那么this指向这个对象。否则this一般指向全局对象
普通function函数
声明式function fun() {}--- window
赋值式const fun = function() {}--- window
forEach循环 --- window
定时器,延时器 --- window
对象中的函数const obj = { fun: function(){} }--- 对象本身(看具体调用方式，总之是fun的直接调用者)
事件绑定事件处理函数oDiv.addEventListener('click' , function(){})--- 绑定事件的标签，如<div>...</div>-
箭头函数
因为没有prototype，箭头函数没有自己的this，它的函数体中使用的this，其实是继承自 定义它时所在的普通函数的this（如果定义在全局就指向全局对象window/undefined）。this是在上下文创建时确定的，因此箭头函数的父级（函数或全局对象）创建上下文时，箭头函数体内的this也可以说是“绑定”了。
事件绑定处理函数如果用箭头函数，就不会再指向div标签，因为它没有定义在任何函数里，上下文指向全局。
document.querySelector('div').addEventListener('click' , () => {
console.log(this); // window
})
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
console.log(this); // forEach函数的this指向，window
item.addEventListener('click' , ()=>{
// 箭头函数的this，跟随它的父级程序forEach函数，因此也是window
console.log(key,this);
})
})
番外——作用域链与原型链的区别：
当访问一个变量时，解释器会先在当前作用域查找标识符，如果没有找到就去父作用域找，作用域链顶端是全局对象window，如果window都没有这个变量则报错。
当在对象上访问某属性时，首选会查找当前对象，如果没有就顺着原型链往上找，原型链顶端是null，如果全程都没找到则返一个undefined，而不是报错。
三、箭头函数不能改变this指向
箭头函数有个特性，就是它函数体内的this一旦绑定成功，就无法用显示绑定的方式去修改。
function fn() {
return () => {
console.log(this.name);
};
}
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
let bar = fn.call(obj1); // fn 的 this指向obj1，并返回了箭头函数赋给了bar
bar.call(obj2); // 听风是风
bar就是箭头函数，可以看到当我们企图用call把它绑定给obj2并执行的时候，箭头函数内的this仍然指向obj1，显示绑定失败了。
这里指的是无法直接给箭头函数通过显示绑定修改this指向。修改外层函数this指向从而间接修改箭头函数this当然是可行的。
function fn() {
return () => {
console.log(this.name);
};
};
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
fn.call(obj1)(); // fn this指向obj1,箭头函数this也指向obj1
fn.call(obj2)(); //fn this 指向obj2,箭头函数this也指向obj2
四、箭头函数的调用（这边以React组件举例）
- 无参数
可以直接使用函数名，因为整个函数赋值给了press，这样就不会出现初始化时自动调用。这种方式千万不要在后面加()
press = () => {
this.setState({
data: 1
})
};
<Text onPress={this.press}>{this.state.data}</Text>
- 有参数
必须使用箭头函数的形式调用，因为加括号会直接调用函数
press = (num) => {
this.setState({
data: num
})
};
<Text onPress={() => this.press(2)}>{this.state.data}</Text>
- 而在组件中定义的普通函数，就只能用箭头函数或者绑定this的方式来调用了，因为否则它的this会指向window/undefined
press(num) {
this.setState({
data: 1,
count: num
})
};
// 无参数
<Text onPress={() => this.press()}>{this.state.data}</Text>
// 或者
<Text onPress={this.press.bind(this)}>{this.state.data}</Text>
// 有参数
<Text onPress={() => this.press(2)}>{this.state.data}</Text>
<Text onPress={this.press.bind(this,2)}>{this.state.data}</Text>
- 传递React 的事件对象 e
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
- 补充一下在React组件（ES6 Class类）中的定义方法时，使用普通函数和箭头函数的区别
class App extends Component {
fun1() {}
fun2 = () => {}
}
fun1是App类原型方法的定义，宽松模式下对应 ES5 构造函数的写法就是App.prototype.fun1 = function() {}
fun2则是 Stage 2 Public Class Fields 里面的写法，也就是实例方法，babel 下需要用 Class properties transform Plugin 进行转义。相当于：
class App extends Component {
constructor (...args) {
super(...args)
this.fun2 = () => {
}
}
}
我们先看一个ES5构造函数的例子，来回顾下类中方法定义的区别。
function Cat(name) {
this.name = name || '咪咪'
this.meow = function() {
console.log('实例方法',this)
}
console.log(this) // Cat {name: "花花", meow: ƒ} // 构造函数的this指向实例
}
Cat.eat = function() {
console.log('静态方法',this)
}
Cat.prototype.sleep = function() {
console.log('原型方法',this) // 还是看直接调用者，实例调用就指向实例，prototype调用就指向原型
}
let littleCat = new Cat('花花')
// Cat.meow() // 报错，Cat.meow is not a function
littleCat.meow() // 实例方法
Cat.eat() // 静态方法, this 指向构造函数本身
// littleCat.eat() // 报错，littleCat.eat is not a function，实例不能访问静态方法
// Cat.sleep() // Cat.sleep is not a function
Cat.prototype.sleep() // 构造函数原型方法必须用 类名.prototype.方法名 调用 ，否则如上会报错
littleCat.sleep() // 原型方法
由此可见，原型方法的this是不固定的，依赖它的直接调用者。而实例方法只有实例可以调用，且永远指向实例本身
再加个题外话，用面向对象的思维，class声明的类也是一个对象，就像如下的obj。在ES6类中以fun() {}这种形式定义方法，就是给对象的fun属性赋值一个匿名函数的简洁语法。当然普通的对象（非函数）没有prototype，当然也没有原型方法。这边只是类比。而且用class构造类时不能用第二种方式定义方法。这里提一嘴就是强调千万不要把fun() {}和声明式的具名函数弄混淆了，它仍然只是把匿名函数的地址赋值给一个变量而已。
let obj = {
fun() { console.log(this) }
}
// 等同于
let obj = {
fun: function() {
console.log(this)
}
}
在React组件中使用原型方法，比如传入子组件或作为事件回调时，需要手动绑定this，不然会找不到正确的this。
像这样<button onClick={this.handleClick.bind(this)}></button>
再看ES6的写法如何确定原型方法的this。如下只有第一种方式(直接使用this.jump)不能指向Dog的实例。
由此我们可以看出，this需要明确指向组件实例的时候，以箭头函数的形式定义实例方法，可以省去很多麻烦。
class Dog extends React.Component {
constructor(props){
super(props)
this.name = '旺财'
this.eat = this.eat.bind(this) // 如果定义为原型方法，React的推荐写法
console.warn(this.name) // 旺财
}
jump() {
console.warn('原型方法调用时候绑定组件实例this', this.name)
}
eat() {
console.warn('原型方法在constructor绑定组件实例this', this.name)
// // 现在this也指向Dog的实例了
}
drink() {
console.warn('原型方法调用时用箭头函数绑定this', this.name)
}
run = (arg) => { // 也是React官方推荐的写法
console.warn('实例方法', this.name, arg) // this永远指向Dog的实例
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text onPress={this.jump}>原型方法直接使用时</Text>
<Text>-------------------------------------------------------------</Text>
<Text onPress={this.jump.bind(this)}>原型方法调用时绑定组件实例this</Text>
<Text>-------------------------------------------------------------</Text>
<Text onPress={this.eat}>原型方法在构造函数中绑定组件实例this</Text>
<Text>-------------------------------------------------------------</Text>
<Text onPress={() => this.drink()}>原型方法调用时用箭头函数绑定this</Text>
<Text>-------------------------------------------------------------</Text>
<Text onPress={this.run}>实例方法无参情况直接使用</Text>
<Text>-------------------------------------------------------------</Text>
<Text onPress={(e) => this.run('汪汪汪',e)}>实例方法有参情况使用</Text>
</View>
)
}
}
上面除了第一种<Text onPress={this.jump}>原型方法直接使用时</Text>虽然都能实现需求，但第四种<Text onPress={() => this.drink()}>原型方法调用时用箭头函数绑定this</Text>，问题在于每次渲染 Dog 时都会创建不同的回调函数。在大多数情况下都没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。因此通常还是建议run = () => {}箭头函数的写法（class fields语法）和在构造器种绑定this的方式。
