文章目录

1概念
2this指向
三、箭头函数不能改变this指向
四、箭头函数的调用（这边以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函数，因此也是windowconsole.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 (<Viewstyle={{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的方式。

react组件中箭头函数的使用相关推荐

react 组件中使用组件_禁止使用React功能组件的7个理由
react 组件中使用组件 Are React's Functional Components Worth The Cost? React的功能组件值得吗? Update 5/31/19: React ...
ES6中箭头函数解释
箭头函数任何可以书写匿名函数的位置,都可以书写箭头函数箭头函数将会绑定this为函数书写位置的this值模块化(nodejs带来的模块化) 没有模块化的世界:全局变量污染,难以管理常见的模块化 ...
3. React 组件中怎么做事件代理？它的原理是什么？
3. React 组件中怎么做事件代理?它的原理是什么? React 基于 Virtual DOM 实现了一个 SyntheticEvent 层(合成事件层), 定义的事件处理器会接收到一个合成事件对 ...
import引入json文件_在React组件中导入Json文件
我正在尝试在React组件中加载languages.json文件.当我想导入json文件时,我在第一步收到以下错误.这是错误: ERROR in ./app/languages.json Module ...
React Native之箭头函数和延展操作符（...）
箭头函数在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: import React, {Component} from 'react ...
react组件中的constructor和super小知识
1.react中用class申明的类一些小知识如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeof Child === 'fu ...
微信小程序自定义组件中 triggerEvent() 函数失效的一种情况 (Cannot read property ‘triggerEvent‘ of undefined)
在网络上并没有搜索到这种情况,这里记录下避免以后的自己和广大码农踩到这个坑问题描述:在自定义组件中想调用 this.triggerEvent()函数给父组件传参,过程中报错:Cannot read ...
JS中箭头函数详解=
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target.此外,箭头函数总是匿名的.这些函数表达式最适合非方法函数,它们不能用作构造函数. ...
【React】1128- 如何在 React 组件中优雅的实现依赖注入
控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度,其中最常见的方式就是依赖注入(Dependency Inject ...

react组件中箭头函数的使用

文章目录

1概念

2this指向

三、箭头函数不能改变this指向

四、箭头函数的调用（这边以React组件举例）

react组件中箭头函数的使用相关推荐

最新文章

热门文章