react组件中箭头函数的使用

1概念

箭头函数是匿名函数的另一种表达形式，简化写法。

// 普通函数
const fun = function() {}     
// 把匿名函数的引用地址赋值给了fun变量

箭头函数为

// 箭头函数
const fun = () => {}  

举例

const oDiv = document.querySelector('div');

// 普通函数
oDiv.addEventListener('click' , function() {})

// 箭头函数
oDiv.addEventListener('click' , () => {})

2this指向

温故而知新：this 指针，是一个与执行上下文相关的特殊对象，也被称之为上下文对象。

在全局环境（全局执行上下文）中（在任何函数体外部的代码），this 始终- 指向全局对象(window，严格模式下是undefined)
在函数环境（函数执行上下文）中，this的值取决于函数的调用方式，如果被一个对象调用，那么this指向这个对象。否则this一般指向全局对象

1 普通function函数

声明式 function fun() {} --- window
赋值式 const fun = function() {} --- window
forEach循环 — window
定时器,延时器 — window
对象中的函数 const obj = { fun: function(){} } — 对象本身(看具体调用方式，总之是fun的直接调用者)
事件绑定事件处理函数 oDiv.addEventListener('click' , function(){}) — 绑定事件的标签，如<div>...</div>

2箭头函数
因为没有prototype，箭头函数没有自己的this，它的函数体中使用的this，其实是继承自 定义它时所在的普通函数的this（如果定义在全局就指向全局对象window/undefined）。this是在上下文创建时确定的，因此箭头函数的父级（函数或全局对象）创建上下文时，箭头函数体内的this也可以说是“绑定”了。

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组件举例）

1无参数
可以直接使用函数名，因为整个函数赋值给了press，这样就不会出现初始化时自动调用。这种方式千万不要在后面加()

press = () => {
  this.setState({
    data: 1
  })
};
<Text onPress={this.press}>{this.state.data}</Text>

2有参数
必须使用箭头函数的形式调用，因为加括号会直接调用函数

press = (num) => {
  this.setState({
    data: num
  })
};
<Text onPress={() => this.press(2)}>{this.state.data}</Text>

3而在组件中定义的普通函数，就只能用箭头函数或者绑定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>

4 传递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 的方式，事件对象以及更多的参数将会被隐式的进行传递。

5 补充一下在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>
    )
  }
}

第一个会报错，this找不到
第二个
第三个

第四种

第五种

第六种

上面除了第一种<Text onPress={this.jump}>原型方法直接使用时</Text>虽然都能实现需求，但第四种<Text onPress={() => this.drink()}>原型方法调用时用箭头函数绑定this</Text>，问题在于每次渲染 Dog 时都会创建不同的回调函数。在大多数情况下都没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。因此通常还是建议run = () => {}箭头函数的写法（class fields语法）和在构造器种绑定this的方式。