JS 箭头函数不能作为构造函数：理解其设计意图

各位观众，掌声欢迎来到“箭头函数漫谈”现场！今天咱们聊点轻松但重要的，那就是箭头函数为啥不能当构造器使唤。

开场白：箭头函数，你是谁？

话说JavaScript世界里，函数可是个顶顶重要的角色。它就像个万能工具，能封装代码、传递数据、创建对象……简直无所不能。但随着ES6（ECMAScript 2015）的到来，函数家族里多了个新成员——箭头函数。

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const addArrow = (a, b) => a + b;

箭头函数简洁明了，语法糖分十足，一下子俘获了不少程序员的心。但是，用着用着，大家发现了个奇怪的现象：箭头函数不能像传统函数那样，用 new 关键字来创建对象。

const Person = (name) => {
  this.name = name; // 试图给 this 赋值
};

// 尝试用 new 关键字
const john = new Person("John"); // 💥 TypeError: Person is not a constructor

报错了！这到底是为啥呢？难道箭头函数天生残疾？别急，今天咱们就来扒一扒箭头函数的底裤，看看它到底为啥不能当构造函数。

第一幕：this 的秘密

要理解箭头函数不能作为构造函数的原因，首先得搞清楚 this 这个神奇的家伙。在JavaScript里，this 的指向非常灵活，有时候甚至让人摸不着头脑。

传统函数中的 this：
- 作为普通函数调用： this 指向全局对象（浏览器环境下是 window，Node.js 环境下是 global）。
- 作为对象的方法调用： this 指向调用该方法的对象。
- 使用 call、apply、bind： 可以显式地指定 this 的指向。
- 作为构造函数调用： this 指向新创建的对象。

function sayHello() {
  console.log("Hello, " + this.name);
}

const person = {
  name: "Alice",
  greet: sayHello,
};

sayHello(); // Hello, undefined  (this 指向 window)
person.greet(); // Hello, Alice (this 指向 person)

// 使用 call
sayHello.call({ name: "Bob" }); // Hello, Bob

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hi, I'm " + this.name);
  };
}

const john = new Person("John"); // this 指向新创建的 john 对象
john.greet(); // Hi, I'm John

箭头函数中的 this：

箭头函数压根儿就没有自己的 this！它的 this 是在定义的时候就已经确定了，它会继承外层作用域的 this。这种特性被称为“词法作用域”。

const person = {
  name: "Alice",
  greet: () => {
    console.log("Hello, " + this.name); // this 指向外层作用域的 this
  },
};

person.greet(); // Hello, undefined (如果外层作用域是 window，则输出 "Hello, undefined")

function outer() {
  this.name = "Outer";
  const inner = () => {
    console.log("Inner: " + this.name); // this 继承 outer 的 this
  };
  inner();
}

const obj = new outer(); // Inner: Outer

第二幕：构造函数的职责

构造函数的任务是创建一个新的对象，并初始化这个对象。它会经历以下几个步骤：

创建一个新的空对象。
将构造函数的 this 指向这个新对象。
执行构造函数中的代码，给新对象添加属性和方法。
如果构造函数没有显式地返回一个对象，则返回这个新创建的对象。

function Dog(name, breed) {
  this.name = name;
  this.breed = breed;
  this.bark = function() {
    console.log("Woof!");
  };
  // 隐式返回 this
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // Woof!

第三幕：箭头函数 vs 构造函数：一场注定失败的恋爱

现在，让我们把箭头函数和构造函数的特性放在一起对比一下：

特性	传统函数 (作为构造函数)	箭头函数
`this` 指向	新创建的对象	继承外层作用域的 `this`
`arguments`	有自己的 `arguments` 对象	没有 `arguments` 对象
`new` 调用	可以使用 `new`	不能使用 `new`

从上表可以看出，箭头函数和构造函数在 this 的处理方式上截然不同。构造函数需要一个可以指向新对象的 this，而箭头函数压根就没有自己的 this，它只能使用外层作用域的 this。

因此，如果尝试用 new 关键字调用箭头函数，JavaScript引擎会抛出一个 TypeError 错误，告诉你箭头函数不能作为构造函数。

第四幕：没有 prototype 的悲哀

除了 this 的问题，箭头函数还有一个致命的缺陷：它没有 prototype 属性。

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

const john = new Person("John");
john.greet(); // Hello, my name is John

const PersonArrow = (name) => {
  this.name = name;
};

console.log(PersonArrow.prototype); // undefined

prototype 是JavaScript实现继承的关键。每个函数都有一个 prototype 属性，它指向一个对象，这个对象包含了可以被该函数创建的所有对象共享的属性和方法。

构造函数通过 prototype 来实现继承，让创建出来的对象能够访问原型链上的属性和方法。而箭头函数没有 prototype 属性，这意味着它无法实现基于原型的继承。

总结：箭头函数的设计意图

箭头函数的设计初衷并不是为了取代传统函数，而是为了提供一种更简洁、更方便的方式来定义函数。它的主要用途是：

简化回调函数： 箭头函数可以大大简化回调函数的写法，让代码更简洁易懂。
保持 this 的一致性： 箭头函数可以避免 this 指向混乱的问题，让 this 始终指向定义时的上下文。

// 传统的回调函数
setTimeout(function() {
  console.log("Delayed!");
}, 1000);

// 箭头函数的回调函数
setTimeout(() => {
  console.log("Delayed!");
}, 1000);

const button = document.getElementById("myButton");

// 传统函数，this 指向 button
button.addEventListener("click", function() {
  console.log(this); // <button id="myButton">Click Me</button>
});

// 箭头函数，this 指向外层作用域的 this (可能是 window)
button.addEventListener("click", () => {
  console.log(this); // window
});

const obj = {
  name: "Object",
  method: function() {
    // 使用箭头函数保持 this 指向 obj
    setTimeout(() => {
      console.log(this.name); // Object
    }, 1000);
  }
};

obj.method();

结论：箭头函数不是万能的

箭头函数虽然有很多优点，但它并不是万能的。在需要使用 this 指向新对象、需要使用 prototype 实现继承的场合，还是应该使用传统函数。

一张表格，总结全文精华

特性	传统函数 (普通函数)	传统函数 (作为构造函数)	箭头函数
`this` 指向	动态，取决于调用方式	新创建的对象	词法作用域，继承外层 `this`
`arguments`	有	有	没有
`prototype`	有	有	没有
`new` 调用	可以	可以	不可以
适用场景	通用	创建对象和实现继承	简化回调函数，保持 `this`

尾声：选择合适的工具

就像厨房里有各种各样的刀具一样，JavaScript里也有各种各样的函数。选择合适的函数，才能更好地完成任务。箭头函数是把好刀，但不是万能刀。了解它的特性和局限性，才能在合适的场合发挥它的威力。

今天的讲座就到这里，感谢各位的聆听！下次再见！

发表回复 取消回复

发表回复取消回复