箭头函数不可用作构造函数,因其无prototype属性、无[[Construct]]内部方法、this词法绑定且无arguments和new.target;普通函数或class才支持new调用。

箭头函数没有 prototype 属性
普通函数声明或表达式创建的函数对象,自带 prototype 属性,这是 JavaScript 实现原型继承和 new 操作的基础。而箭头函数被设计为“语法糖”,不绑定自己的 prototype——它根本就没有这个属性。
你可以直接在控制台验证:
function Normal() {}
console.log(Normal.prototype); // { constructor: Normal }
const Arrow = () => {};
console.log(Arrow.prototype); // undefined
当执行 new Arrow() 时,引擎会尝试读取 Arrow.prototype 来设置新对象的 [[Prototype]],但该属性不存在,于是抛出 TypeError: Arrow is not a constructor。
箭头函数没有 this 绑定能力,更无 [[Construct]] 内部方法
构造函数必须具备 [[Construct]] 内部方法,才能响应 new 调用。只有具有该方法的对象(如普通函数、类、内置构造器)才可被 new 调用。箭头函数被明确规范为“不可构造”(not constructable),其内部不实现 [[Construct]]。
立即学习“Java免费学习笔记(深入)”;
-
this在箭头函数中是词法绑定的,无法通过new改变上下文 - 没有
arguments对象,也没有new.target(new.target在箭头函数体内始终为undefined) - 不能用
call/apply/bind改变this,自然也无法模拟构造行为
哪些场景下误用箭头函数会导致构造错误
常见于试图替代类或工厂函数的写法,尤其在团队协作或代码重构时容易踩坑:
- 把类方法写成箭头函数后,又想用
new实例化该方法(实际应定义在class中) - 用箭头函数封装初始化逻辑,比如
const createPerson = (name) => ({ name });,误以为可以new createPerson('Alice') - 在 Vue 2 的
data选项中返回箭头函数(虽不报错,但破坏响应式原理;Vue 3 的setup中若误用箭头函数定义响应式工厂,也会导致无法正确追踪)
替代方案:什么时候该用普通函数或 class
需要实例化、有原型链、需访问 new.target 或自定义 this 行为时,必须用普通函数或 class:
class Person {
constructor(name) {
this.name = name;
}
}
// ✅ 正确
const p = new Person('Bob');
// ❌ 错误(语法合法但运行时报错)
const BadPerson = (name) => ({ name });
const p2 = new BadPerson('Alice'); // TypeError
如果只是封装逻辑并返回对象,保持箭头函数即可,但别加 new——它本就不是为构造设计的。真正容易忽略的是:即使你没显式写 new,某些框架(如旧版 MobX、部分 DSL 解析器)内部可能尝试调用 [[Construct]],这时箭头函数会静默失败或抛异常。











