为什么箭头函数不能作为构造函数?

箭头函数不能 new,不是语法层面"禁止你写",而是它从底层就缺少构造函数需要的能力。

先看 new 到底做了什么

new Foo() 大致会执行这几步:

  1. 创建一个空对象;
  2. 把这个空对象的 __proto__ 指向 Foo.prototype;
  3. 把 this 绑定到这个新对象;
  4. 执行函数体;
  5. 如果函数没有返回对象,就返回这个新对象。

所以普通函数能当构造函数,依赖三个东西:

  • 有 [[Construct]] 内部方法;
  • 有 prototype;
  • this 可以在调用时被绑定到新对象。

箭头函数缺了什么?

1. 没有 [[Construct]]

普通函数同时有 [[Call]] 和 [[Construct]],所以既能普通调用,也能 new 调用。

箭头函数只有 [[Call]],没有 [[Construct]]。

所以:

js

编辑

ini 复制代码
const A = () => {};
new A(); // TypeError: A is not a constructor

引擎一看到 new 后面是箭头函数,就直接报错。

2. 没有 prototype

js

编辑

javascript 复制代码
function Foo() {}
console.log(Foo.prototype); // {}

const Bar = () => {};
console.log(Bar.prototype); // undefined

new 需要把实例挂到 Foo.prototype 上形成原型链。箭头函数没有 prototype,这一步根本没法做。

3. this 是词法绑定,不能被 new 改写

普通函数作为构造函数时,this 会指向新创建的对象:

js

编辑

javascript 复制代码
function Person(name) {
  this.name = name; // this 指向 new 出来的实例
}

但箭头函数的 this 在定义时就从外层作用域捕获了,之后无论怎么调用都不会变。

js

编辑

ini 复制代码
const Person = (name) => {
  this.name = name; // this 不是新对象,而是外层 this
};

这就和 new 的语义冲突了:new 要求 this 指向新实例,而箭头函数不允许 this 被重新绑定。

一句话理解

箭头函数被设计成"只负责执行",不负责"创建对象"。 它没有 [[Construct]],没有 prototype,this 也不能被 new 改写,所以天然不能作为构造函数。

这也和前面类组件里 handleClick = () => {} 是一致的:它只是在构造函数执行时,把箭头函数赋给实例属性,并不是 new 这个箭头函数。

相关推荐
亿元程序员1 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice1 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户0829773260051 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M1 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端
Swot1 小时前
SvelteKit 数据流研究:`+page.js` 和 `+page.server.js` 到底谁在跑,数据又去了哪儿
前端·后端
用户4147679304151 小时前
Windows 触摸屏上 Swiper 轮播滑不动?可能是内部滚动容器抢走了你的手势
前端
张明君644511 小时前
从一个 Referer 引发的 403,到 SSR 服务失稳:Astro 流式渲染与缓存失效分析
前端
律宏阔1 小时前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
费曼学习法1 小时前
把 3 个内部服务封装成 MCP Server 的工程复盘:进程模型、超时与错误契约
前端
Captaincc1 小时前
转译:《软件工程师现在该怎么办》
前端·后端·ai编程