【js篇】如果 new 一个箭头函数，会发生什么？在 JavaScript 中，箭头函数（Arrow Function）

在 JavaScript 中，箭头函数（Arrow Function）是 ES6 引入的一种更简洁的函数写法。但与传统函数不同的是，箭头函数不能作为构造函数使用，因此不能通过 new 关键字来实例化。

✅ 一句话总结

箭头函数没有自己的 prototype 属性，也没有绑定 this、arguments、super 等上下文对象，所以它不能作为构造函数，也不能被 new 调用，否则会抛出错误。

✅ 一、示例说明

const Foo = () => {};
const obj = new Foo(); // TypeError: Foo is not a constructor

📌 报错信息：

TypeError: Foo is not a constructor

这说明箭头函数不能作为构造函数调用。

✅ 二、为什么不能 `new` 一个箭头函数？

要理解这个问题，我们需要回顾一下 new 操作符的执行过程：

🧠 `new` 的执行步骤如下：

创建一个新的空对象；
将新对象的 [[Prototype]]（即 __proto__）指向构造函数的 prototype；
将构造函数中的 this 绑定到这个新对象；
执行构造函数中的代码（为对象添加属性和方法）；
返回这个新对象；

而箭头函数缺少以下关键能力：

特性	箭头函数是否支持	说明
`prototype` 属性	❌ 不支持	构造函数必须有 `prototype`
`this` 绑定	❌ 没有自己的 `this`	箭头函数继承外层作用域的 `this`
`arguments` 对象	❌ 不支持	使用 `...args` 替代
可作为构造函数	❌ 不可以	不具备构造函数的行为

✅ 三、箭头函数的设计初衷

箭头函数的主要目的是：

更简洁的语法；
词法作用域绑定 this（即不创建自己的 this）；
避免作为构造函数误用；

因此，从设计上就禁止了使用 new 实例化箭头函数。

✅ 四、对比普通函数

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

const p = new Person('Tom');
p.sayHello(); // Hello, Tom

✅ 正常运行，因为普通函数具有构造函数所需的全部特性。

✅ 五、一句话总结

箭头函数没有自己的 this 和 prototype，也不支持 arguments，它本质上是一个“简化版”函数，用于替代某些场景下的普通函数，但它不能作为构造函数使用，也不能通过 new 调用。

💡 进阶建议

在 Vue / React 开发中，组件方法推荐使用箭头函数以避免 this 丢失；
使用 TypeScript 可以提前发现尝试 new 箭头函数的错误；
使用 ESLint 规则防止误将箭头函数当作构造函数使用；
理解 class 与箭头函数的结合使用（如类字段箭头函数自动绑定 this）；

【js篇】如果 new 一个箭头函数，会发生什么？