如何用 prototype 与构造函数实现 JavaScript 挂载方法-js教程-PHP中文网

javascript中应将共用方法挂载到构造函数的prototype上，以实现方法共享、节省内存；若在构造函数内用this定义方法，则每个实例都会创建独立副本，造成浪费。

如何用 prototype 与构造函数实现 javascript 挂载方法

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

为什么挂到 prototype 上？

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

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

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

// 1. 定义构造函数

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function Person(name, age) {<br>
  this.name = name;<br>
  this.age = age;<br>
}

// 2. 在 prototype 上挂载方法

Person.prototype.sayHello = function() {<br>
  return `Hello, I'm ${this.name} and ${this.age} years old.`;<br>
};

Person.prototype.haveBirthday = function() {<br>
  this.age++;<br>
  return `${this.name} is now ${this.age}.`;<br>
};

// 3. 创建实例并调用

const alice = new Person('Alice', 25);<br>
const bob = new Person('Bob', 30);

console.log(alice.sayHello()); // Hello, I'm Alice and 25 years old.<br>
console.log(bob.haveBirthday()); // Bob is now 31.

常见等价写法与注意事项

批量挂载可使用 Object.assign：

Object.assign(Person.prototype, {<br>
  sayHello() { return `Hello, I'm ${this.name}`; },<br>
  toString() { return `${this.name}(${this.age})`; }<br>
  });

避免重写整个 prototype：直接赋值 Person.prototype = { ... } 会切断 constructor 指向，需手动修复：
```
Person.prototype = {<br>
  constructor: Person,<br>
  sayHello() { ... }<br>
  };
```
箭头函数不能用于 prototype 方法：它不绑定 this，会导致无法访问实例属性。