JS原型共享方法全解析

本文深入解析了JavaScript中实现方法共享的关键机制——原型链。通过将方法定义在构造函数的`prototype`对象上，所有实例得以共享同一份方法代码，显著节省内存并提升性能。文章首先对比了方法定义在构造函数内部与原型链上的差异，揭示了前者造成的内存浪费。随后，详细阐述了原型链的工作原理，即实例通过`[[Prototype]]`链接向上查找并调用原型对象上的方法。此外，文章还特别强调了`this`指向问题，指出在方法调用时，`this`指向实际调用者（实例对象），而非原型本身，确保方法能正确访问实例属性。最后，通过实例代码演示，生动展示了原型链在方法共享中的实际应用，助力开发者更深入地理解JavaScript对象模型的核心设计理念。掌握原型链机制，是成为一名优秀的JavaScript开发者的必备技能。

JavaScript中实现方法共享的核心机制是原型链，即通过构造函数的prototype对象存储方法，使所有实例共享同一份方法代码，避免内存浪费。1. 当方法定义在构造函数内部时，每个实例都会创建独立的方法副本，导致内存开销大；2. 而通过原型链，方法只在prototype上定义一次，实例通过[[Prototype]]链接向上查找调用，实现高效复用；3. 方法调用时this指向实际调用者（即实例对象），而非原型本身，确保方法能正确访问实例属性。这种机制不仅节省内存，还提升性能，是JavaScript对象模型的关键设计。

JavaScript中，实现方法共享的核心机制就是“原型链”。简单来说，我们不是在每个对象实例内部都复制一份方法，而是把这些方法定义在一个共享的“原型”对象上。当一个实例需要调用某个方法时，它会沿着原型链向上查找，直到找到并执行这个方法。这样一来，所有实例都能高效地复用同一份方法代码，极大地节省了内存开销。

在我看来，理解JavaScript的原型，就像是理解一个家族的遗传基因。每个家族成员（实例）都有自己的独特之处，但他们也共享着家族的某些特征或技能（方法），这些技能并不是每个人都独立学习一遍，而是家族的“传统”或“遗产”里就有的。

具体到代码层面，我们通常会通过构造函数的prototype属性来添加共享方法。当一个函数被用作构造函数（通过new关键字调用）时，它创建的每个实例都会自动获得一个指向该构造函数prototype对象的内部链接（[[Prototype]]，在多数浏览器中表现为__proto__）。

举个例子：

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

// 将方法添加到Person的原型上
Person.prototype.greet = function() {
    console.log(`你好，我叫${this.name}，今年${this.age}岁。`);
};

Person.prototype.celebrateBirthday = function() {
    this.age++;
    console.log(`${this.name}庆祝了生日，现在${this.age}岁了！`);
};

const person1 = new Person('张三', 30);
const person2 = new Person('李四', 25);

person1.greet(); // 你好，我叫张三，今年30岁。
person2.greet(); // 你好，我叫李四，今年25岁。

person1.celebrateBirthday(); // 张三庆祝了生日，现在31岁了！
person1.greet(); // 你好，我叫张三，今年31岁。

你看，greet和celebrateBirthday方法只在内存中存在一份，所有Person的实例都能调用它们。这不就实现了方法共享嘛。

为什么我们需要方法共享？不共享会有什么问题？

这个问题，我个人觉得是理解JavaScript对象模型的一个关键点。试想一下，如果你不使用原型共享，而是把方法直接定义在构造函数内部，会发生什么？

function BadPerson(name, age) {
    this.name = name;
    this.age = age;
    // 每次创建实例，都会重新创建这些方法
    this.greet = function() {
        console.log(`你好，我叫${this.name}，今年${this.age}岁。`);
    };
    this.celebrateBirthday = function() {
        this.age++;
        console.log(`${this.name}庆祝了生日，现在${this.age}岁了！`);
    };
}

const badPerson1 = new BadPerson('王五', 40);
const badPerson2 = new BadPerson('赵六', 35);

console.log(badPerson1.greet === badPerson2.greet); // false

看到没？badPerson1.greet和badPerson2.greet是两个完全不同的函数对象，即使它们做的事情一模一样。如果你的应用需要创建成千上万个BadPerson实例，那么每个实例都会带着它自己的一套方法副本。这会带来非常明显的内存浪费，同时，创建实例的速度也会变慢，因为每次都要执行函数创建的操作。

这就像是，你每买一辆新车，就重新发明一次轮子。这显然是不划算的。方法共享就是为了避免这种不必要的重复劳动，让代码更高效、更优雅。

原型链是如何让方法共享成为可能的？

这真是JavaScript里最巧妙也最容易让人混淆的地方之一。简单来说，每个JavaScript对象都有一个内部属性，指向它的原型对象。当你在一个对象上访问一个属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎就会沿着这个内部链接（也就是原型链）向上查找，直到找到这个属性或方法，或者查到原型链的顶端（null）。

用之前的Person例子来说：

1. person1是一个Person的实例。
2. 当你调用person1.greet()时，JavaScript首先在person1对象自身查找greet方法。
3. person1对象自身没有greet方法。
4. 于是，JavaScript通过person1的内部[[Prototype]]链接（即person1.__proto__）找到Person.prototype对象。
5. 在Person.prototype上找到了greet方法。
6. 执行Person.prototype.greet方法。

这条查找路径就是原型链。Person.prototype对象自身也有一个[[Prototype]]，它指向Object.prototype。Object.prototype是原型链的终点（它的[[Prototype]]是null）。这意味着，所有JavaScript对象都能访问Object.prototype上的方法，比如toString()、hasOwnProperty()等。

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

通过这种层层递进的查找机制，方法得以在多个对象之间共享，而无需在每个对象上都复制一份。这是一种非常高效且灵活的继承方式。

共享方法时，this指向问题如何处理？

这块内容，我觉得是原型方法共享里一个非常实用且必须搞清楚的点。很多初学者在这里容易犯迷糊，觉得既然方法定义在原型上，那this会不会指向原型对象本身呢？答案是：不会。

在JavaScript中，this的指向是在函数被调用时确定的，而不是在函数定义时。当一个原型上的方法被一个实例调用时，this会自动指向那个调用该方法的实例对象。

继续用Person的例子：

Person.prototype.greet = function() {
    // 这里的this指向调用greet方法的实例
    console.log(`你好，我叫${this.name}，今年${this.age}岁。`);
};

const person1 = new Person('张三', 30);
const person2 = new Person('李四', 25);

person1.greet(); // 当person1调用时，this就是person1
person2.greet(); // 当person2调用时，this就是person2

你看，greet方法虽然只有一个副本，但它能正确地获取到调用者（person1或person2）的name和age属性。这是因为this在运行时被动态绑定到了调用它的对象上。

这种机制使得原型方法非常强大和灵活，它们可以作用于任何调用它们的实例，处理实例特有的数据。这也就是为什么我们能用一套方法模板，去操作无数个具体的数据实例。当然，如果你用call、apply、bind或者箭头函数（ES6）去显式地改变this的绑定，那又是另一回事了，但对于常规的原型方法调用，this总是指向实例。理解这一点，对于编写健壮的JavaScript代码至关重要。

文中关于JavaScript,原型链,this指向,prototype,方法共享的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS原型共享方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。