在 JavaScript 开发中，函数是一种非常重要的概念。在 ECMAScript 2015（ES6）中，引入了箭头函数（Arrow Function）这个新的语法特性，让开发者在编写函数时有更多的选择。但是，很多开发者对箭头函数和传统函数的区别感到困惑，本文将详细介绍箭头函数和传统函数的区别，并提供一些示例代码和使用建议。
传统函数
在 ES6 之前，我们通常使用 function 关键字来定义函数，例如：
function add(a, b) {
return a + b;
}传统函数有以下特点：
- 使用 function 关键字定义；
- 函数体内部有自己的 this 对象，它指向函数运行时所在的环境对象；
- 可以使用 arguments 对象获取函数参数；
- 可以使用 new 关键字调用，创建新的对象实例；
- 可以使用 call() 方法或 apply() 方法改变 this 的指向；
- 可以使用 bind() 方法创建一个新的函数，指定 this 的指向。
箭头函数
在 ES6 中，我们可以使用箭头函数来定义函数，例如：
let add = (a, b) => a + b;
箭头函数有以下特点：
- 使用箭头（=>）定义；
- 没有自己的 this，它的 this 是继承自父级作用域的；
- 没有 arguments 对象，但可以使用 rest 参数（...args）获取函数参数；
- 不能使用 new 关键字调用，因为它没有自己的 this；
- 不能使用 call() 方法或 apply() 方法改变 this 的指向；
- 不能使用 bind() 方法创建一个新的函数，指定 this 的指向。
区别与联系
在了解了传统函数和箭头函数的特点之后，我们来看一下它们的区别和联系。
this 的指向
在传统函数中，this 的指向是在函数运行时动态绑定的，它指向函数运行时所在的环境对象。而在箭头函数中，this 的指向是在函数定义时确定的，它指向父级作用域的 this。例如：
-- -------------------- ---- -------
--- --- - -
----- ------
-------- ---------- -
--------------------- -
----------------------- -- ---------
-- ------
-
--
--------------
--- ---- - -
----- --------
-------- ---------- -
------------- -- -
----------------------- -- -----
-- ------
-
--
---------------在第一个示例中，setTimeout() 函数内部的 this 指向全局对象（浏览器环境下为 window），因此输出 undefined。而在第二个示例中，箭头函数的 this 指向 obj2，因此输出 Jerry。
arguments 对象
在传统函数中，我们可以使用 arguments 对象获取函数参数。而在箭头函数中，没有 arguments 对象，但可以使用 rest 参数（...args）获取函数参数。例如：
-- -------------------- ---- ------- -------- ------ - ----------------------- - ------- -- --- -- -- --- -- -- --- ----- - --------- -- - ------------------ -- -------- -- --- -- -- --- -- --
使用建议
在实际开发中，我们应该根据具体情况选择使用传统函数或箭头函数。一般来说，使用箭头函数可以让代码更简洁、易读，并且避免了 this 的指向问题。而在需要使用 this 或 arguments 对象的场景下，应该使用传统函数。
总结
本文介绍了传统函数和箭头函数的区别和联系，包括 this 的指向、arguments 对象等方面。在实际开发中，应该根据具体情况选择使用传统函数或箭头函数，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fa59bdd10417a2226356f6