Prototype挂载方法与构造函数详解

在JavaScript中，将共用方法挂载到构造函数的prototype上而非在构造函数内部用this定义，是实现高效面向对象编程的核心实践——它让所有实例共享同一份方法代码，显著节省内存并避免重复创建；文章深入剖析了prototype机制的原理、标准写法、批量扩展技巧、常见陷阱（如重写prototype导致constructor丢失、箭头函数不适用等），并揭示ES6 class本质仍是prototype模式的语法糖，帮你真正理解JS原型继承的底层逻辑与最佳实践。

在 JavaScript 中，用构造函数配合 prototype 挂载方法，是实现面向对象编程（OOP）风格、避免重复创建函数、节省内存的关键方式。核心思路是：把共用的方法定义在构造函数的 prototype 对象上，所有实例共享这些方法，而非每个实例都拥有独立副本。

为什么挂到 prototype 上？

直接在构造函数内部用 this.method = function() {...} 会为每个实例创建一份新函数，浪费内存。而挂到 prototype 上，方法只有一份，所有实例通过原型链访问，高效且符合设计意图。

基本写法：构造函数 + prototype 扩展

以下是最标准的实现模式：

// 1. 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 2. 在 prototype 上挂载方法
Person.prototype.sayHello = function() {
  return `Hello, I'm ${this.name} and ${this.age} years old.`;
};
Person.prototype.haveBirthday = function() {
  this.age++;
  return `${this.name} is now ${this.age}.`;
};

// 3. 创建实例并调用
const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);
console.log(alice.sayHello()); // Hello, I'm Alice and 25 years old.
console.log(bob.haveBirthday()); // Bob is now 31.

常见等价写法与注意事项

• 批量挂载可使用 Object.assign：
  Object.assign(Person.prototype, {
  sayHello() { return `Hello, I'm ${this.name}`; },
  toString() { return `${this.name}(${this.age})`; }
});
• 避免重写整个 prototype：直接赋值 Person.prototype = { ... } 会切断 constructor 指向，需手动修复：
  Person.prototype = {
  constructor: Person,
  sayHello() { ... }
};
• 箭头函数不能用于 prototype 方法：它不绑定 this，会导致无法访问实例属性。

ES6 类语法背后的本质

现代写法 class Person { constructor() { ... } sayHello() { ... } } 实际就是上述 prototype 模式的语法糖。编译后，sayHello 仍被添加到 Person.prototype 上，行为完全一致。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Prototype挂载方法与构造函数详解》文章吧，也可关注golang学习网公众号了解相关技术文章。