引言
在 ES6 中新增了箭头函数，它拥有更加简洁的语法和更加直观的表达方式，可以方便地解决一些 JavaScript 中函数作用域以及 this 关键字带来的问题。在实际开发中，常常会使用箭头函数来编写代码。本文将会深入探讨箭头函数的使用方法和避免用法上的坑点。
箭头函数的语法
箭头函数的语法非常简单，可以用一条语法来概括：参数列表 + 箭头符号 + 函数体。
const arrowFunction = () => {
// 这里是函数体
}当函数只有一个参数时，可以省略掉参数列表的括号。
const arrowFunction = arg => {
// 这里是函数体
}当函数的函数体只有一条语句时，可以省略掉大括号。
const arrowFunction = arg => console.log(arg);
当函数体只有一条语句时，且需要返回值，则可以使用隐式的 return。
const arrowFunction = arg => arg + 1;
箭头函数的使用
1. 在 forEach 中使用箭头函数
很多人会在 forEach 中使用箭头函数，但是这样会存在一个坑点。箭头函数没有自己的 this，取而代之的是外侧函数的 this。在 forEach 中，箭头函数中的 this 会指向 Window，而使用普通函数时，this 指向当前元素。
const arr = ["apple", "banana", "orange"];
arr.forEach(function(item) {
console.log(item, this); // apple Window ...
});
arr.forEach(item => {
console.log(item, this); // apple Window ...
});2. 作为对象方法使用箭头函数
在对象方法中使用箭头函数，箭头函数的 this 会指向外部作用域中的 this，而不是当前对象本身。
-- -------------------- ---- -------
----- --- - -
---- --------
----- ---------- -
---------------------- -- -----
----- ------- - -- -- ----------------------
---------- -- -----
-
-
-----------3. 在定时器中使用箭头函数
在定时器中使用箭头函数，this 指向定义时的外部作用域，而不是最终执行定时器回调时的作用域。
-- -------------------- ---- -------
----- --- - -
---- --------
----- ---------- -
---------------------- -- -----
------------- -- -
---------------------- -- -----
-- ------
-
-
-----------箭头函数的坑点
1. 不能用作构造函数
箭头函数不支持 new 操作符，也就是不能用作构造函数。
const ArrowFunc = () => {
this.name = "Lucy";
}
const obj = new ArrowFunc(); // TypeError: ArrowFunc is not a constructor2. 不能使用 arguments 对象
箭头函数不支持 arguments 对象，而使用 rest 语法可以解决这个问题。
const arrowFn = (...args) => console.log(args); arrowFn(1, 2, 3); // [1, 2, 3]
3. 可能会导致性能问题
嵌套过深的箭头函数会产生大量的闭包引用，占用过多的内存空间，可能会导致性能问题。
总结
本文详细探讨了箭头函数的语法和使用方式，以及可能存在的坑点。在开发过程中，正确地使用箭头函数可以解决一些简单的问题，提高代码可读性，但也需要注意一些避免的坑点。希望本文能为大家提供参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65186d0595b1f8cacd0cd27f