「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」
箭头函数相信都不陌生，现在就让我们来深入研究一下箭头函数。
前言
🍉 相关文章
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
没有 “this”
JavaScript 的精髓在于创建一个函数并将其传递到某个地方。在这样的函数中，我们通常不想离开当前上下文。
而箭头函数没有 this。如果访问 this，则会从外部获取。正好就可以符合这个需求。
例如：可以使用它在对象方法内部进行迭代。
showList() {
this.students.forEach(
student => console.log(this.title + ': ' + student)
);
}
这里 forEach 中使用了箭头函数，所以其中的 this.title 其实和外部方法 showList 的完全一样。那就是：group.title。
但是如果没有用箭头函数，可以来看看是什么样的？
showList() {
this.students.forEach(
function(student) {
console.log('当前结果：', this.title + ' - ' + student)
}
);
}
可以看到，打印结果中this.title变成了undefined，这是因为 forEach 运行它里面的这个函数，但是这个函数的 this 为默认值 this=undefined，因此就出现了尝试访问 undefined.title 的情况。
但箭头函数就没事，因为它们没有 this。
注：箭头函数
=>和使用.bind(this)👉 bind传送门
.bind(this)创建了一个该函数的“绑定版本”。- 箭头函数
=>没有创建任何绑定。箭头函数只是没有this。this的查找与常规变量的搜索方式完全相同：在外部词法环境中查找。
没有 “arguments”
arguments 是一个对应于传递给函数的参数的类数组对象。
arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
现在我们把上面的示例改写成箭头函数，再运行看看
箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。
箭头函数中要想接收不定参数，应该使用rest参数...解决。
没有 “prototype” 属性
箭头函数没有prototype属性。
不能对箭头函数进行 new 操作
箭头函数不能用作构造器，和 new一起用会抛出错误。
换行问题
箭头函数在参数和箭头之间不能换行。
但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行
参考资料：
MDN Arrow function expressions
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
