随着 JavaScript 的日益普及，前端开发者开始喜欢使用 ECMAScript 2017 中的箭头函数。箭头函数是一种与传统函数不同的语法结构，它们是一个简化版本的函数，可以更容易地编写代码和提高可读性。不过，箭头函数并不是所有情景下都比传统函数更好。本文将探究一下在不同场合下，箭头函数和传统函数的优缺点。
箭头函数的优点
简洁的语法
箭头函数可以使用简洁的语法来声明函数。例如，下面的两个函数在功能上是相同的：
// 传统函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;可以看到，箭头函数的语法更简洁，使得代码更加易于理解和维护。
独立的 this
在传统函数中，this 关键字的值随着函数的调用方式而改变。这通常会导致在回调函数和嵌套函数中出现困惑和错误。而在箭头函数中，this 的值是在定义函数时确定的，它指向包含箭头函数的上下文。这使得箭头函数更加易于使用和理解：
-- -------------------- ---- -------
-- -------- ----
----- ------ - -
----- -----
------ ---------- -
---------------------------------
-
--
------------------------ ----- -- -- ---------
-- -------- ----
----- ------ - -
----- -----
------ -- -- -
---------------------------------
-
--
------------------------ ----- -- -- ----------------更好的性能
箭头函数相对于传统函数的性能更高。这是因为箭头函数的内部结构更简单，没有自己的 this，arguments，super 或 new.target。这使得 ECMAScript 引擎可以更轻松地优化和执行它们。
箭头函数的缺点
不能作为构造函数
箭头函数不能用作构造函数。由于箭头函数没有自己的 this，无法使用 new 生成新的实例。如果尝试使用 new 构造箭头函数，将会抛出 TypeError 异常。
const Person = (name, age) => {
this.name = name; // TypeError: Person is not a constructor
this.age = age;
};
const p = new Person('张三', 18);没有 arguments 对象
在箭头函数中，没有 arguments 对象。如果需要访问参数，必须使用 rest 参数：
// 使用 rest 参数访问参数
const sum = (...args) => {
let result = 0;
for (let arg of args) {
result += arg;
}
return result;
};传统函数的优点
可以作为构造函数
传统函数可以作为构造函数使用，即可以用 new 生成新的实例。这使得传统函数更加灵活和适应不同的场景。
function Person(name, age) {
this.name = name;
this.age = age;
}
const p = new Person('张三', 18);有 arguments 对象
在传统函数中，可以使用 arguments 对象访问函数的参数。这使得传统函数更加灵活，可以适应多种不同的场景。
function sum() {
let result = 0;
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}结论
简单来说，箭头函数相对于传统函数有简洁的语法、独立的 this 和更好的性能。而传统函数则可以作为构造函数使用，并且具有 arguments 对象。因此，在选择使用箭头函数还是传统函数时，需要根据实际情况来选择合适的语法结构。
如果需要使用 this，或者需要作为构造函数使用，或者需要使用 arguments 对象，那么传统函数是更好的选择。而如果代码需要更加简洁，或者想要更好的性能，或者不需要 this，那么箭头函数是更好的选择。
示例代码
下面是使用箭头函数和传统函数分别实现的同一个函数，可以对比二者之间的差异。
-- -------------------- ---- ------- -- ----- ----- ----- - ------ ---- -- - --------------------------------------- -- -- ----- -------- ----------- ---- - --------------------------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cc8bb5f551281025ba6aa