ES6函数扩展之箭头函数的详细介绍
- 引言
- 正文
- 一、箭头函数的基本使用
- 二、箭头函数的作用
- 三、箭头函数的注意点
- （1）例子1
- （2）例子2
- （3）例子3
- 四、不宜使用箭头函数的场景
- （1）定义类的方法
- （2）绑定动态this
- （3）代码复杂
- 结束语
引言
相信很多小伙伴自从知道了ES6的箭头函数以后，都疯狂得使用，渐渐的淡忘了普通函数的使用。不过确实，箭头函数看起来比较简洁，用起来也舒服，不过它的出现是为了解决某一部分问题的，并不是用来替代普通函数的，所以我们不能在每一个地方都使用箭头函数。
- 公众号：前端印象
- 不定时有送书活动，记得关注~
- 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】
正文
一、箭头函数的基本使用
我们先来看看箭头函数是如何使用的吧
代码语言：javascript复制let fn1 = function () {
console.log('我是普通函数')
}
let fn2 = () => {
console.log('我是箭头函数')
}
fn1()
fn2()
//我是普通函数
//我是箭头函数在这个例子中，fn1与fn2是完全等价的，这就是箭头函数的基本使用。
有没有感觉箭头函数特别的简洁？因为他只有几个简单的符号，其实，这并不是他最简洁的时候。我们来看一下给函数传参的例子
代码语言：javascript复制let fn1 = function(data) {
console.log(data)
}
let fn2 = (data) => {
console.log(data)
}如果函数只需要传一个参数，我们可以去掉箭头函数的小括号；若传入多个参数，小括号还是要加上的哦
代码语言：javascript复制let fn2 = data => {
console.log(data)
}其实这个例子中，console.log(data)两边的大括号也是可以去掉的。因为在箭头函数中如果函数的代码部分只有一句代码，是可以省去大括号的
let fn2 = data => console.log(data)当然这还不是最简单的，当我们函数的代码部分只有一句代码，并且是return语句的话，我们可以省略大括号，并且省略return
let fn2 = data => data //相当于let fn2 = data => return data但是，如果return的是一个对象，就尽量不要省略大括号和return了，因为大括号会被解析为代码块。我们可以在对象两边加一个小括号，就可以起到return回一个对象的作用了。
//报错
let fn2 = data => {ret: data} //本意是想return {ret: data}
//不报错
let fn2 = data => ({ret: data}) //等价于 let fn2 = data => {return {ret: data}}
//报错
let fn2 = data => return {ret: data}
//不报错
let fn2 = data => {return {ret: data}}二、箭头函数的作用
首先ES6新增了箭头函数这个东西，一定是为了解决某个问题。我们先来看看原先没有箭头函数的一个例子
代码语言：javascript复制let obj = {
name: '张三',
fn: function () {
return function() {
console.log(this.name) //本意是想打印 '张三'
}
}
}
obj.fn()()
//打印结果： undefined在这个例子中，我们本来是想打印 张三的，但最后却是undefined，这是为什么呢？
普通函数中的this的指向是运行时绑定的，就像这个例子中的，先调用了obj.fn，返回了一个嵌套的匿名函数，此时该匿名函数处于全局中，也就是不在obj这个对象内了，因为普通函数的this是运行时绑定的，所以此时的this指向的是全局，如果在浏览器中，就是window对象。
那么我们的本意是什么呢？希望这个this指向的是obj中的name，那么我们可以这么做
let obj = {
name: '张三',
fn: function () {
let _this = this //在定义是将this赋值给一个变量_this
return function() {
console.log(_this.name) //调用被赋值的_this去获取obj里的name
}
}
}
obj.fn()()
//打印结果： 张三此时我们就可以在嵌套函数中，获取到obj中的name值了，因为在定义时，就把正确的this保存在一个变量中，并给嵌套函数使用。
那么当箭头函数就可以解决这种情况。普通函数的this是运行时绑定，箭头函数的this是定义时绑定。我们将上面例子中的嵌套函数用箭头函数代替
let obj = {
name: '张三',
fn: function () {
//此处有个this，该this指向obj，并且被箭头函数所绑定
return () => {
console.log(this.name) //这里的this是向上寻找，找到function() {}内有一个this，并与之绑定，而这个this指向的就是obj
}
}
}
obj.fn()()
//打印结果： 张三这样就轻松地解决了普通函数this随着运行环境的改变而改变的问题了。
三、箭头函数的注意点
- 箭头函数内没有
this，如果在箭头函数内使用this，会自动往上寻找，直到找到this才停止寻找。 - 箭头函数的
this是定义时绑定，而不是运行时绑定 - 箭头函数内没有
arguments对象 - 箭头函数不能作为构造函数，原因也是因为它内部没有自己的
this
我们来用几个例子验证这几个注意点
（1）例子1
代码语言：javascript复制function fn() {
//此处有个this，指向全局对象，被箭头函数所绑定
return () => {
console.log(this.name)
return () => {
console.log(this.name)
}
}
}
//给全局对象设置一个属性name，值为 李四
window.name = '李四'
//调用fn内的第一个箭头函数
fn()() //返回 '李四'
//调用fn内第二个箭头函数
fn()()() //返回 '李四'在这个例子中，函数fn内部有两个嵌套的箭头函数。
第一个箭头函数内调用this，因为箭头函数内没有this，所以向上找，发现函数fn有一个this，于是就与该this绑定。因为该this指向window，所以console.log(this.name)返回了李四
第二个箭头函数内调用this，因为箭头函数内没有this，所以向上找，因为上一级还是箭头函数，仍然没有this，所以继续向上找，同样发现了函数fn中有一个this指向window，与之绑定，最后也返回了李四
（2）例子2
代码语言：javascript复制let fn = function (data1, data2) {
return (data3, data4) => {
console.log(arguments)
}
}
fn(1, 2)(3, 4)
//返回 [Arguments] {'0': 1, '1': 2}函数中有一个arguments对象，它的作用是返回一个函数传入的实参的。在这个例子中，我们在箭头函数中打印的arguments，最后返回的却是普通函数传入的实参内容，说明箭头函数内是没有arguments对象的。
（3）例子3
我们来看看平时申明构造函数是如何做的
代码语言：javascript复制function My_constructor() {
this.name = '张三'
this.age = 18
}然后再通过关键字new来调用这个构造函数，创建一个新的对象
let new_obj = new My_constructor()这里简单的给大家说一下，通过new调用构造函数，其实就是先创建一个新的空对象，然后将构造函数内的属性或方法都赋值给这个空对象，再将this指向这个新创建的对象。
所以从这个过程中我们可以看出，需要函数内部有一个this，但是箭头函数没有自己的this啊，所以箭头函数不能作为构造函数。
四、不宜使用箭头函数的场景
在第三部分介绍了箭头函数的注意点以后，我们可以看到，有些时候使用箭头函数是不合适的。
（1）定义类的方法
代码语言：javascript复制let obj = {
name: 'Lpyexplore',
get_name: () => {
console.log(this.name)
}
}
obj.get_name()
//返回 undefined我们可以看到在定义类的方法时，我们使用了箭头函数，准备通过this.name获取obj中的name，最后返回了undefined。
我们来看一下为何返回undefined，首先obj.get_name是一个箭头函数，内部没有自己的this，所以会向上找，找到了obj，但对象不构成单独的作用域，所以最后就与全局绑定在一起了，但在全局没有定义一个名为name的变量，所以最后this.name返回的就是undefined。
（2）绑定动态this
例如我们给一个按钮button绑定一个点击事件，要求点击按钮以后，获取到被点击的这个按钮，进行一些相关操作。这里我们就通过this来获取被点击的按钮对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class="btn">按钮</button>
<script>
let btn = document.querySelector('.btn')
btn.onclick = function () {
console.log(this)
}
</script>
</body>
</html>这里我们给按钮绑定点击事件，使用的是普通函数。我们来看一下，当我们点击了按钮，会打印什么
我们可以看到，如愿以偿地获取到了被点击的按钮。那么如果使用箭头函数作为点击事件的处理函数呢？
代码语言：javascript复制//省略重复代码
btn.onclick = () => {
console.log(this)
}这时我们再来点击一下按钮，看看会打印什么
我们可以看到，打印的是全局的window对象，因为箭头函数内没有自己的this，所以往上找，就直接找到了全局的window对象了。所以像这种情况，是不建议使用箭头函数的。
（3）代码复杂
我们都知道，箭头函数看起来很简洁，写起来也非常的方便，但我们有没有发现，使用了箭头函数以后，代码的可读性就变差了。例如这样一个例子
代码语言：javascript复制let fn = data => data你第一眼看到这句代码的时候，你能瞬间读懂这句代码的意思吗？我想你肯定会多思考几秒，那如果换成普通函数呢？是不是就能一眼读懂代码的意思了
代码语言：javascript复制let fn = function (data) {
return data
}说实话，普通函数虽然写法比箭头函数麻烦一点，但是可读性还是很强的。设想一下，如果有一大堆的代码，涉及到很多很多的函数，甚至有很多嵌套函数，如果我们都使用箭头函数，那么这代码阅读起来是不是就非常的困难呢。
总而言之，如果遇到频繁地使用函数，并且代码特别复杂，我们可以在功能 、代码简洁 、代码可读性这三者之间进行权衡，并有选择性地使用箭头函数。
结束语
写完这一篇关于箭头函数的文章，我对箭头函数又有了更深刻的印象。同时也告诫自己，不要平时为了方便或者为了装高手，无脑地使用箭头函数，有时可能用法不当造成了一些bug，然后花费大量的时间去解决。
希望这篇文章能对你们有所帮助，我是Lpyexplore，创作不易，喜欢的加个关注，点个收藏，给个赞~
