千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的

ES6函数扩展之箭头函数的详细介绍

• 引言
• 正文
• • 一、箭头函数的基本使用
  • 二、箭头函数的作用
  • 三、箭头函数的注意点
  • • （1）例子1
    • （2）例子2
    • （3）例子3
  • 四、不宜使用箭头函数的场景
  • • （1）定义类的方法
    • （2）绑定动态this
    • （3）代码复杂
• 结束语

引言

相信很多小伙伴自从知道了ES6的箭头函数以后，都疯狂得使用，渐渐的淡忘了普通函数的使用。不过确实，箭头函数看起来比较简洁，用起来也舒服，不过它的出现是为了解决某一部分问题的，并不是用来替代普通函数的，所以我们不能在每一个地方都使用箭头函数。

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

一、箭头函数的基本使用

我们先来看看箭头函数是如何使用的吧

let fn1 = function () {
	console.log('我是普通函数')
}

let fn2 = () => {
	console.log('我是箭头函数')
}

fn1()
fn2()

//我是普通函数
//我是箭头函数

在这个例子中，fn1与fn2是完全等价的，这就是箭头函数的基本使用。

有没有感觉箭头函数特别的简洁？因为他只有几个简单的符号，其实，这并不是他最简洁的时候。我们来看一下给函数传参的例子

let fn1 = function(data) {
	console.log(data)
}

let fn2 = (data) => {
	console.log(data)
}

如果函数只需要传一个参数，我们可以去掉箭头函数的小括号；若传入多个参数，小括号还是要加上的哦

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新增了箭头函数这个东西，一定是为了解决某个问题。我们先来看看原先没有箭头函数的一个例子

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随着运行环境的改变而改变的问题了。

三、箭头函数的注意点

1. 箭头函数内没有this，如果在箭头函数内使用this，会自动往上寻找，直到找到this才停止寻找。
2. 箭头函数的this是定义时绑定，而不是运行时绑定
3. 箭头函数内没有arguments对象
4. 箭头函数不能作为构造函数，原因也是因为它内部没有自己的this

我们来用几个例子验证这几个注意点

（1）例子1

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

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

我们来看看平时申明构造函数是如何做的

function My_constructor() {
	this.name = '张三'
	this.age = 18
}

然后再通过关键字new来调用这个构造函数，创建一个新的对象

let new_obj = new My_constructor()

这里简单的给大家说一下，通过new调用构造函数，其实就是先创建一个新的空对象，然后将构造函数内的属性或方法都赋值给这个空对象，再将this指向这个新创建的对象。

所以从这个过程中我们可以看出，需要函数内部有一个this，但是箭头函数没有自己的this啊，所以箭头函数不能作为构造函数。

四、不宜使用箭头函数的场景

在第三部分介绍了箭头函数的注意点以后，我们可以看到，有些时候使用箭头函数是不合适的。

（1）定义类的方法

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>

这里我们给按钮绑定点击事件，使用的是普通函数。我们来看一下，当我们点击了按钮，会打印什么

在这里插入图片描述

我们可以看到，如愿以偿地获取到了被点击的按钮。那么如果使用箭头函数作为点击事件的处理函数呢？

//省略重复代码

btn.onclick = () => {
	console.log(this)
}

这时我们再来点击一下按钮，看看会打印什么

在这里插入图片描述

我们可以看到，打印的是全局的window对象，因为箭头函数内没有自己的this，所以往上找，就直接找到了全局的window对象了。所以像这种情况，是不建议使用箭头函数的。

（3）代码复杂

我们都知道，箭头函数看起来很简洁，写起来也非常的方便，但我们有没有发现，使用了箭头函数以后，代码的可读性就变差了。例如这样一个例子

let fn = data => data

你第一眼看到这句代码的时候，你能瞬间读懂这句代码的意思吗？我想你肯定会多思考几秒，那如果换成普通函数呢？是不是就能一眼读懂代码的意思了

let fn = function (data) {
	return data
}

说实话，普通函数虽然写法比箭头函数麻烦一点，但是可读性还是很强的。设想一下，如果有一大堆的代码，涉及到很多很多的函数，甚至有很多嵌套函数，如果我们都使用箭头函数，那么这代码阅读起来是不是就非常的困难呢。

总而言之，如果遇到频繁地使用函数，并且代码特别复杂，我们可以在功能 、代码简洁 、代码可读性这三者之间进行权衡，并有选择性地使用箭头函数。

结束语

写完这一篇关于箭头函数的文章，我对箭头函数又有了更深刻的印象。同时也告诫自己，不要平时为了方便或者为了装高手，无脑地使用箭头函数，有时可能用法不当造成了一些bug，然后花费大量的时间去解决。

希望这篇文章能对你们有所帮助，我是Lpyexplore，创作不易，喜欢的加个关注，点个收藏，给个赞~