大家好，我是今天的主讲人，咱们今天来聊聊 JavaScript 中箭头函数的一个“小秘密”：它们没有自己的 prototype 属性。这听起来可能有点抽象，但相信我，了解这一点对于真正掌握 JavaScript 函数至关重要。
开场白：prototype 是个啥？
在深入箭头函数之前，我们先快速回顾一下 prototype 属性。在 JavaScript 中，每个函数（除了箭头函数，这正是我们今天要讨论的）都有一个名为 prototype 的属性。这个属性本身是一个对象，它的主要作用是：
-
作为构造函数的蓝图： 当你使用
new关键字调用一个函数时，实际上是在创建一个新的对象。这个新对象的原型 (prototype) 会指向构造函数的prototype属性指向的对象。换句话说，prototype定义了所有通过该构造函数创建的对象的“公共属性和方法”。 -
实现继承：
prototype机制是 JavaScript 实现继承的关键。通过设置一个对象的prototype指向另一个对象，我们可以让前者继承后者的属性和方法。
举个例子：
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, my name is " + this.name);
};
let john = new Person("John");
john.greet(); // 输出: Hello, my name is John
let jane = new Person("Jane");
jane.greet(); // 输出: Hello, my name is Jane
console.log(Person.prototype); // 输出: { greet: [Function (anonymous)], constructor: [Function: Person] }
console.log(john.__proto__ === Person.prototype); // 输出: true在这个例子中，Person 是一个构造函数，Person.prototype 对象包含了一个 greet 方法。通过 new Person() 创建的 john 和 jane 对象都继承了 greet 方法。 注意 __proto__ 属性，虽然不建议直接使用，但它指向了创建该对象的构造函数的 prototype。
箭头函数登场：prototype 去哪儿了？
现在，让我们把目光转向箭头函数。箭头函数是 ES6 (ECMAScript 2015) 引入的一种更简洁的函数语法。它们看起来像这样：
const add = (a, b) => a + b;但是，与传统的函数声明或函数表达式不同，箭头函数有一个重要的区别：它们没有自己的 prototype 属性。
const multiply = (a, b) => a * b;
console.log(multiply.prototype); // 输出: undefined是不是很神奇？ multiply.prototype 直接是 undefined。
为什么箭头函数没有 prototype？
这主要是因为箭头函数的设计目标和使用场景与传统函数有所不同。箭头函数主要用于以下两个目的：
-
更简洁的语法： 箭头函数旨在提供一种更简洁的方式来编写短小的函数表达式，特别是在回调函数和高阶函数中。
-
词法作用域的
this： 箭头函数不绑定自己的this值，而是继承自父作用域的this值。这解决了传统函数中this指向问题的一些常见困扰。
由于箭头函数主要用于这些场景，因此它们不需要像构造函数那样创建对象实例，也不需要实现继承。因此，JavaScript 引擎就没有为箭头函数分配 prototype 属性。
没有 prototype 的影响
箭头函数没有 prototype 属性，这意味着：
- 不能作为构造函数使用： 你不能使用
new关键字来调用箭头函数。如果你尝试这样做，会抛出一个TypeError错误。
const myArrowFunction = () => {};
try {
new myArrowFunction(); // 抛出 TypeError: myArrowFunction is not a constructor
} catch (e) {
console.error(e);
}- 不能定义继承关系： 由于箭头函数没有
prototype，因此你不能使用prototype机制来实现继承。你不能将一个箭头函数的prototype赋值给另一个对象的__proto__属性，也不能使用Object.setPrototypeOf()方法来设置箭头函数的原型。
什么时候使用箭头函数？什么时候使用传统函数？
既然箭头函数和传统函数有这些区别，那么在实际开发中，我们应该如何选择呢？
| 特性 | 传统函数 (function) | 箭头函数 (=>) |
|---|---|---|
prototype 属性 |
有 | 没有 |
this 绑定 |
动态绑定 | 词法作用域 |
arguments 对象 |
有 | 没有 |
new 调用 |
可以作为构造函数 | 不能作为构造函数 |
| 适用场景 | 需要动态 this，构造函数 |
简洁的函数表达式，回调函数 |
一般来说，可以遵循以下原则：
-
使用箭头函数的场景：
- 当你需要一个简洁的函数表达式，例如在
map、filter、reduce等数组方法中。 - 当你需要确保
this指向当前作用域，避免this指向问题。
- 当你需要一个简洁的函数表达式，例如在
-
使用传统函数的场景：
- 当你需要定义一个构造函数，用于创建对象实例。
- 当你需要在函数内部访问
arguments对象。 - 当你需要动态地绑定
this值。
一些额外的例子和注意事项
- 箭头函数中的
this： 箭头函数的this值继承自父作用域。这在处理事件监听器和回调函数时非常有用。
const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);
const myObject = {
name: 'My Object',
handleClick: function() {
// 在这里，`this` 指向 myObject
button.addEventListener('click', () => {
// 在这个箭头函数中，`this` 仍然指向 myObject，而不是 button
console.log('Clicked by ' + this.name);
});
}
};
myObject.handleClick();在这个例子中，即使点击事件发生在 button 元素上，箭头函数中的 this 仍然指向 myObject，因为箭头函数继承了 handleClick 方法的 this 值。
- 箭头函数没有
arguments对象： 如果你需要在箭头函数中访问传递给函数的所有参数，可以使用剩余参数语法 (...args)。
const sum = (...args) => {
let total = 0;
for (let i = 0; i < args.length; i++) {
total += args[i];
}
return total;
};
console.log(sum(1, 2, 3, 4)); // 输出: 10- 箭头函数的返回值： 如果箭头函数只有一个表达式，则该表达式的值将自动作为返回值。如果箭头函数包含多个语句，则需要使用
return关键字显式地返回值。
const square = x => x * x; // 隐式返回
const complexCalculation = (x, y) => {
const result = x * x + y * y;
return result; // 显式返回
};总结：箭头函数与 prototype 的关系
总而言之，箭头函数没有 prototype 属性，这是因为它们的设计目标和使用场景与传统函数不同。箭头函数主要用于提供更简洁的语法和词法作用域的 this，而不需要像构造函数那样创建对象实例或实现继承。
理解箭头函数没有 prototype 属性，可以帮助你更好地选择合适的函数类型，并避免一些潜在的错误。
最后的思考
希望今天的讲座能让你对箭头函数和 prototype 属性有更深入的了解。记住，JavaScript 是一门充满细节的语言，理解这些细节对于编写高质量的代码至关重要。掌握这些概念，你就能在编写 JavaScript 代码时更加自信，更加得心应手。
现在，该轮到你们思考了。下次遇到需要使用函数的情况，不妨先问问自己：我需要一个构造函数吗？我需要动态的 this 绑定吗？ 答案将帮助你选择最合适的函数类型。
祝大家编程愉快！