JavaScript 是一门动态语言，它的语法和功能在不断地发展和改进。ES6（ECMAScript 6）是 JavaScript 的一个重要版本，它引入了很多新特性，其中包括箭头函数。在 ES6 中，我们可以使用两种方式来定义函数：普通函数和箭头函数。虽然它们都可以用来定义函数，但是它们之间还是有很多的区别。本文将详细介绍 ES6 中普通函数和箭头函数的区别，并且给出一些示例代码。
普通函数
在 ES6 之前，我们通常使用普通函数来定义函数。普通函数的语法如下：
function add(a, b) {
return a + b;
}普通函数可以使用 function 关键字来定义，后面跟着函数名、参数列表和函数体。函数体可以包含多条语句，我们可以在函数体内使用 return 关键字来返回函数执行的结果。普通函数可以使用 new 关键字来创建一个新的对象，也可以使用 call() 或 apply() 方法来改变函数的上下文。
箭头函数
ES6 引入了箭头函数，它可以用来更简洁地定义函数。箭头函数的语法如下：
const add = (a, b) => a + b;
箭头函数使用 => 符号来定义，它可以省略 function 关键字和函数名。如果函数只有一个参数，可以省略参数列表的括号。如果函数的函数体只有一条语句，可以省略大括号和 return 关键字。箭头函数的返回值就是函数体的结果。箭头函数不能使用 new 关键字来创建新的对象，也不能使用 call() 或 apply() 方法来改变函数的上下文。
普通函数和箭头函数的区别
虽然普通函数和箭头函数都可以用来定义函数，但它们之间还是有很多的区别。下面是普通函数和箭头函数的区别：
- this 指向不同： 在普通函数中，
this指向调用函数的对象。在箭头函数中，this指向定义箭头函数的上下文对象。如果在箭头函数中使用了this，它将指向定义箭头函数的上下文对象，而不是调用函数的对象。
-- -------------------- ---- -------
----- --- - -
----- ------
------ ---------- -
---------------- -- ---- -- ---------------
--
----------- -- -- -
---------------- -- ---- -- ---------------
-
--
------------ -- --- -- ---- -- ---
----------------- -- --- -- ---- -- ---------在上面的例子中，obj.sayHi() 中的 this 指向 obj，而 obj.sayHiArrow() 中的 this 指向全局对象，因为箭头函数的上下文是全局对象。
- arguments 对象不同： 在普通函数中，我们可以使用
arguments对象来获取函数的参数列表。在箭头函数中，arguments对象不存在，我们需要使用剩余参数来获取函数的参数列表。
-- -------------------- ---- -------
-------- ----- -
--- ----- - --
--- ---- - - -- - - ----------------- ---- -
----- -- -------------
-
------ ------
-
----- -------- - --------- -- ------------------- ---- -- ----- - -----
------------------ -- ---- -- -
----------------------- -- ---- -- -在上面的例子中，sum() 函数使用 arguments 对象来获取函数的参数列表，而 sumArrow() 函数使用剩余参数来获取函数的参数列表。
- 不能使用 new 关键字： 箭头函数不能使用
new关键字来创建新的对象，因为它没有自己的this值。
-- -------------------- ---- ------- -------- ------------ - --------- - ----- - ----- ----------- - ------ -- - --------- - ----- - ----- - - --- -------------- ----- ------ - --- ------------------- -- ---------- ----------- -- --- - -----------
在上面的例子中，Person 函数可以使用 new 关键字来创建新的对象，而 PersonArrow 函数不能使用 new 关键字来创建新的对象。
总结
普通函数和箭头函数都可以用来定义函数，但它们之间还是有很多的区别。普通函数和箭头函数在 this 指向、arguments 对象和 new 关键字方面都有不同。在实际开发中，我们需要根据不同的情况选择使用不同的函数类型。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cab85fadd4f0e0ff496c9b