JavaScript 是一门非常灵活的语言，它支持多种不同的函数定义方式。ES6 引入了箭头函数，它是一种更加简洁的函数定义方式。本文将详细介绍箭头函数与普通函数的区别，帮助读者更好地理解这两种函数定义方式。
箭头函数的定义方式
箭头函数的定义方式如下：
-- -------------------- ---- ------- -- --- ----- ---- - -- -- - -- -------- ---- - -- ---- ----- ---- - ----- -- - -- -------- ---- - -- ---- ----- ---- - -------- ------- -- - -- -------- ---- -
箭头函数可以省略 function 关键字，使用 => 符号表示函数体。如果函数只有一个参数，括号可以省略；如果函数没有参数，括号不能省略。如果函数体只有一行，可以省略花括号和 return 关键字。
箭头函数与普通函数的区别
this 的指向
箭头函数与普通函数最大的区别在于 this 的指向。在普通函数中，this 的指向是动态的，它取决于函数的调用方式。而在箭头函数中，this 的指向是静态的，它取决于函数的定义位置。
在普通函数中，this 的指向可以通过 bind、call、apply 等方法来改变。而在箭头函数中，无论如何都不能改变 this 的指向。
-- -------------------- ---- -------
----- --- - -
----- -----
-------- -------- -- -
----------------------
-
-
----- ---- - -
----- ----
-
------------- -- -----
----- ------- - ----------------------
--------- -- -----
----- -------- - -- -- -
----------------------
-
------------------ -- ------------在上面的例子中，obj.sayName 是一个普通函数，它的 this 指向 obj。通过 bind 方法将 this 改变为 obj2，输出 李四。而 sayName2 是一个箭头函数，它的 this 指向是静态的，无法通过 call 方法改变。
arguments 对象
在普通函数中，可以通过 arguments 对象获取函数的所有参数。而在箭头函数中，没有 arguments 对象，需要使用 rest 参数来获取所有参数。
-- -------------------- ---- -------
-------- ----- -
--- ------ - -
--- ---- - - -- - - ----------------- ---- -
------ -- ------------
-
------ ------
-
----- ---- - --------- -- -
--- ------ - -
--- ---- - - -- - - ------------ ---- -
------ -- -------
-
------ ------
-
------------------ -- --- -- ----
------------------- -- --- -- ----在上面的例子中，sum 是一个普通函数，使用 arguments 对象获取参数。sum2 是一个箭头函数，使用 rest 参数获取参数。
new 关键字
箭头函数不能使用 new 关键字来创建对象。如果使用 new 关键字创建箭头函数，会抛出一个 TypeError 错误。
const Person = name => {
this.name = name
}
const person = new Person('张三') // TypeError: Person is not a constructor在上面的例子中，Person 是一个箭头函数，使用 new 关键字创建对象会抛出一个 TypeError 错误。
总结
本文详细介绍了箭头函数与普通函数的区别。箭头函数与普通函数最大的区别在于 this 的指向。在普通函数中，this 的指向是动态的，而在箭头函数中，this 的指向是静态的。此外，箭头函数没有 arguments 对象，需要使用 rest 参数来获取所有参数。最后，箭头函数不能使用 new 关键字来创建对象。
了解箭头函数与普通函数的区别对于编写高质量的 JavaScript 代码非常重要。希望本文能够帮助读者更好地理解这两种函数定义方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655b5f22d2f5e1655d585983