你知道箭头函数可以被 new 吗

206 阅读3分钟

省流,不可以。


在JavaScript中,箭头函数(Arrow Functions)是不能被用作构造函数,也就是说你不能使用new关键字来实例化一个箭头函数。这是因为箭头函数不绑定自己的thisargumentssupernew.target。这些函数表达式的this值继承自外围(即父级或词法作用域)执行上下文中的this值。

当你尝试使用new关键字来调用一个箭头函数时,JavaScript会抛出一个TypeError,因为箭头函数没有constructor方法,也没有通过new调用的原型链。

下面是一个尝试使用new关键字实例化箭头函数的例子和它会抛出的错误:

const ArrowFunc = () => {
  this.value = 42;
};

const instance = new ArrowFunc(); // TypeError: ArrowFunc is not a constructor

在这个例子中,JavaScript会抛出一个TypeError,因为ArrowFunc是一个箭头函数,不是一个构造函数。

  1. 没有自己的 this 绑定:箭头函数不会创建自己的 this 绑定,它们继承了其所在上下文的 this 值。这意味着在箭头函数内部,this 总是指向定义箭头函数时的上下文,而不是调用时的上下文。在构造函数中,this 应该指向新创建的对象实例,这是箭头函数无法做到的。
  2. 不支持 new.target:在构造函数中,new.target 用于确定构造函数调用的是哪个函数。如果一个函数被 new 调用,new.target 会指向该函数本身。箭头函数不支持 new.target,因此在构造函数调用的上下文中,箭头函数无法正确地指向自己。
  3. 不支持 arguments 对象:箭头函数不支持传统的 arguments 对象,这是因为箭头函数是表达式的一部分,而不是独立的函数声明。在构造函数中,arguments 对象通常用于访问函数调用时传递的参数,箭头函数不支持这一点,限制了其作为构造函数的用途。
  4. 不支持重写 prototype 属性:箭头函数没有自己的 prototype 属性,因为它们不是通过 function 关键字声明的。在 JavaScript 中,对象的原型链是通过 prototype 属性链接的,而箭头函数没有这个属性,因此无法通过原型链继承属性和方法。
  5. 设计目的:箭头函数的设计初衷是为了提供一种简洁的方式来编写函数,特别是在处理事件处理器、回调函数等场景中。它们的主要目的是简化函数的书写,而不是作为构造函数来创建对象。

如果你需要创建一个可以实例化的函数,你应该使用传统的函数表达式或函数声明:

function ConstructorFunction() {
  this.value = 42;
}

const instance = new ConstructorFunction();
console.log(instance.value); // 输出: 42

或者使用ES6的类语法:

class MyClass {
  constructor() {
    this.value = 42;
  }
}

const instance = new MyClass();
console.log(instance.value); // 输出: 42

这两种方式都可以使用new关键字来创建新的实例。