JavaScript 是一门非常灵活的语言，它支持多种不同的函数定义方式。ES6 引入了箭头函数，它是一种更加简洁的函数定义方式。本文将详细介绍箭头函数与普通函数的区别，帮助读者更好地理解这两种函数定义方式。
箭头函数的定义方式
箭头函数的定义方式如下：
// javascriptcn.com 代码示例
// 无参数
const func = () => {
// function body
}
// 一个参数
const func = param => {
// function body
}
// 多个参数
const func = (param1, param2) => {
// function body
}箭头函数可以省略 function 关键字，使用 => 符号表示函数体。如果函数只有一个参数，括号可以省略；如果函数没有参数，括号不能省略。如果函数体只有一行，可以省略花括号和 return 关键字。
箭头函数与普通函数的区别
this 的指向
箭头函数与普通函数最大的区别在于 this 的指向。在普通函数中，this 的指向是动态的，它取决于函数的调用方式。而在箭头函数中，this 的指向是静态的，它取决于函数的定义位置。
在普通函数中，this 的指向可以通过 bind、call、apply 等方法来改变。而在箭头函数中，无论如何都不能改变 this 的指向。
// javascriptcn.com 代码示例
const obj = {
name: '张三',
sayName: function () {
console.log(this.name)
}
}
const obj2 = {
name: '李四'
}
obj.sayName() // 输出：张三
const sayName = obj.sayName.bind(obj2)
sayName() // 输出：李四
const sayName2 = () => {
console.log(this.name)
}
sayName2.call(obj) // 输出：undefined在上面的例子中，obj.sayName 是一个普通函数，它的 this 指向 obj。通过 bind 方法将 this 改变为 obj2，输出 李四。而 sayName2 是一个箭头函数，它的 this 指向是静态的，无法通过 call 方法改变。
arguments 对象
在普通函数中，可以通过 arguments 对象获取函数的所有参数。而在箭头函数中，没有 arguments 对象，需要使用 rest 参数来获取所有参数。
// javascriptcn.com 代码示例
function sum() {
let result = 0
for (let i = 0; i < arguments.length; i++) {
result += arguments[i]
}
return result
}
const sum2 = (...args) => {
let result = 0
for (let i = 0; i < args.length; i++) {
result += args[i]
}
return result
}
console.log(sum(1, 2, 3)) // 输出：6
console.log(sum2(1, 2, 3)) // 输出：6在上面的例子中，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