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

箭头函数不能 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 这个箭头函数。

相关推荐
程序员海军4 小时前
用了两年多 GPT,我最近开始换模型了,还折腾了个求职避坑 Agent
前端·人工智能·后端
zttbee4 小时前
echarts图表tooltip色块失效
前端·javascript·echarts
excel6 小时前
IndexNow:让搜索引擎更快发现网站更新的主动通知协议
前端·后端·架构
子兮曰6 小时前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
虚无境6 小时前
如何用AI帮我写出实用的插件
前端·javascript·ai编程
柳杉7 小时前
从数字化到数智化:3D 可视化大屏的下一个五年
前端·ai编程·数据可视化
zimoyin8 小时前
在 C# 里嵌入 JavaScript:用 Jint 做可热更新的自动化脚本(从入门到踩坑)
javascript·c#·自动化
风骏时光牛马8 小时前
从零到实战:AI全栈学习进阶路线
前端
FRing038 小时前
JavaScript入门到精通二十六(变量提升、函数剩余参数、展开运算符、ES6箭头函数)
开发语言·前端·javascript·es6·箭头函数
用户360055579008 小时前
Kestrel_VLLM - 15 · decode 优化四连击:19ms → 8ms
前端