JavaScript中常规函数和箭头函数之间的区别

根据MDN,箭头函数表达式在语法上是常规函数表达式的紧凑替代方案,尽管没有与this,arguments,super或new.target关键字的绑定。箭头函数表达式不适合用作方法,并且不能用作构造函数。

JavaScript中的常规函数和箭头函数有3个细微的差别。

没有自己的这种约束

箭头函数没有自己的此值。箭头函数中的this的值始终从封闭范围继承。

示例

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

输出结果

100
150
150

看到箭头功能在其范围之外更改了此对象。常规函数只是在自己的内部进行了更改。

箭头函数没有参数数组

在JS参数数组中,函数是一个特殊的对象,可用于获取传递给函数的所有参数。与此类似,箭头函数没有自己绑定到arguments对象的功能,它们绑定到了封闭范围的参数。

箭头函数可调用但不可构造

如果一个函数是可构造的,则可以使用new调用它,即new User()。如果一个函数是可调用的,则可以在不使用新函数的情况下对其进行调用(即正常的函数调用)。

通过函数声明/表达式创建的函数是可构造的和可调用的。

箭头函数(和方法)仅可调用。类构造函数只能构造。

如果试图调用不可调用函数或构造不可构造函数,则会出现运行时错误。

let arrowFunc = () => {}
new arrowFunc()This code gives the error:
arrowFunc is not a constructor