在前端开发中，我们经常需要定义函数来实现某些操作。ES6 引入了箭头函数，它看起来比传统函数更简洁、易于理解。但在某些情况下，使用箭头函数并不能完全替代函数声明或表达式。本文将深入探讨箭头函数和函数声明/表达式的区别与使用场景。
箭头函数
箭头函数是 ES6 中引入的一种新的函数定义方式。它使用箭头 => 来表示函数定义，比传统函数更加简洁。例如，以下代码展示了一个简单的箭头函数：
const add = (a, b) => a + b;
上述箭头函数相当于以下传统函数定义：
function add(a, b) {
return a + b;
}可以看出，箭头函数比传统函数更加简洁，而且没有自己的 this、arguments 和 super 关键字。如果箭头函数只有一个参数，甚至可以省略括号：
const double = x => x * 2;
函数声明/表达式
除了箭头函数外，我们还可以使用传统的函数声明或表达式来定义函数。函数声明使用 function 关键字，具有独立的 this、arguments 和 super 关键字。例如：
function greet(name) {
console.log(`Hello, ${name}!`);
}函数表达式可以像变量一样声明和使用，也具有独立的 this、arguments 和 super 关键字。例如：
const greet = function(name) {
console.log(`Hello, ${name}!`);
};箭头函数与函数声明/表达式的区别
虽然箭头函数和函数声明/表达式都可以定义函数，但它们之间还是有些许不同的。
this 绑定
在传统函数中，this 的值是在运行时动态绑定的。而在箭头函数中，this 的值是在函数定义时静态绑定的。这意味着，在箭头函数中，this 的值为外层作用域中的 this 值。例如：
-- -------------------- ---- -------
----- --- - -
----- --------
------- -
-- ------------- -------
-- --------------- ---------
------------- -- ----------------------- ------
-
--
------------上述代码中，在箭头函数中引用的 this 指向了外层作用域中的 this，即 obj 对象自身。而在传统函数中，this 的值是在运行时动态绑定的，此时 this 已经不再指向 obj 对象。
arguments 绑定
在传统函数中，arguments 变量包含了所有传递给函数的参数。而在箭头函数中，arguments 变量不存在。如果需要获取函数的参数，可以使用 rest 参数语法代替：
const sum = (...args) => args.reduce((acc, cur) => acc + cur, 0);
构造函数
在传统函数中，可以使用 new 运算符将函数作为构造函数使用。而在箭头函数中，不能使用 new 运算符调用函数。例如：
-- -------------------- ---- ------- -------- ------------ - --------- - ----- - ----- ----- - --- ---------------- -- ----- ----- ----------- - ------ -- - --------- - ----- -- ----- --- - --- ------------------- -- ------ ----------- -- --- - -----------
箭头函数和函数声明/表达
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9702
