ES6 中的箭头函数与普通函数的异同
在 ES6 中引入了箭头函数，箭头函数是一个很方便的新特性，可以使代码更加简洁易读。本文将详细介绍箭头函数与普通函数的异同，以及在什么场合使用箭头函数更加适合。
箭头函数与普通函数的语法
普通函数的语法：
function foo(param1, param2) {
// function body
}箭头函数的语法：
const foo = (param1, param2) => {
// function body
}如果函数体只有一条语句则可以省略大括号，例如：
const sum = (a, b) => a + b;
箭头函数与普通函数的作用域
箭头函数与普通函数的最大区别在于其作用域。 普通函数中 this 是动态的，根据当前上下文的不同而不同。 而箭头函数中的 this 是静态的，它的值取决于箭头函数所在的作用域中的 this。
举个例子：
-- -------------------- ---- -------
----- --- - -
----- --------
------ ---------- -
------------------- -- ---- -- ---------------
-
-
------------ -- -- ------- -- ---- -- ------
----- ---- - - ----- ----- --
---------- - ----------
------------- -- -- ------- -- ---- -- ----在普通函数中，函数的执行上下文会动态地改变 this 的值。在上述例子中，当我们将 obj 中的 greet 函数赋值给 obj2 中的 greet 属性时，函数的执行上下文就变成了 obj2，this 的值也随之变为了 obj2。
而在箭头函数中，this 的值在箭头函数定义时就已经确定了，不会再发生改变。 例如：
-- -------------------- ---- -------
----- --- - -
----- --------
------ ---------- -
----- ----- - -- -- ------------------- -- ---- -- ---------------
--------
-
-
------------ -- -- ------- -- ---- -- ------
----- ---- - - ----- ----- --
---------- - ----------
------------- -- -- ------- -- ---- -- ------在这个例子中，箭头函数 sayHi 定义时使用了 this，但 this 的实际值是由 greet 决定的。因此，在调用 obj.greet() 和 obj2.greet() 时都可以正常输出 "Hello, my name is Alice"。
箭头函数的优势与应用场景
由于箭头函数代码更加简单易读，所以在很多场合使用箭头函数都会更为便捷。
如下例中，使用箭头函数来定义数组的 map 函数可以使代码更加简洁：
const arr = [1, 2, 3]; const newArr = arr.map(val => val * 2);
另一个常见的应用场景是在 React 组件中使用箭头函数来定义方法。 在 React 组件中经常需要绑定事件处理函数到组件实例上，否则 this 的值会出乎意料地改变。 例如:
-- -------------------- ---- -------
----- --- ------- --------------- -
------------- -
--------
---------- - - ------- - --
-
------------- -
--------------- ------- ----------------- - - ---
-
-------- -
------ -
------- --------------------------------------
--- ---- ------- -- ------------------- -----
---------
--
-
-这种写法在很多 React 项目中都很常见。但是，仅仅是因为绑定事件处理函数而增加了很多额外的代码，让页面的可读性降低。
而使用箭头函数，可以更加方便地绑定事件处理函数：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------- -
--------
---------- - - ------- - --
-
----------- - -- -- -
--------------- ------- ----------------- - - ---
-
-------- -
------ -
------- ---------------------------
--- ---- ------- -- ------------------- -----
---------
--
-
-通过这种方式，我们可以使代码更加容易理解和可读。
总结
在使用箭头函数时，尽管它提供了便利的代码写法，但一定要注意函数的作用域。如果你需要在函数体内使用 this，并且需要使它动态地根据执行上下文改变，则不应该使用箭头函数。而对于绝大部分的普通函数逻辑，使用箭头函数可能能够让代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646748f9968c7c53b07ac568