想象一下，你有一个大家族，每个家族成员都有自己的个性和特点。在这个家族中，成员之间存在着一种特殊的传承关系：长辈的财产和智慧可以被子孙后代继承。在 JavaScript 的世界里，这种传承关系就是通过 原型链 来实现的。

一、家族的秘密：原型

每个 JavaScript 对象都有一个特殊的属性，叫做 原型。这个原型就像家族中的长辈，它身上拥有着一些共有的属性和方法。当我们创建一个新对象时，这个新对象就会继承它原型上的所有属性和方法。

举个例子，假设我们有一个 Person 构造函数：

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

通过这个构造函数，我们可以创建很多个 Person 对象。这些对象都拥有 name 和 age 属性。但是，如果我们想让所有的 Person 对象都拥有一个 sayHello 方法，该怎么办呢？

我们可以将 sayHello 方法添加到 Person 的原型上：

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

这样，所有由 Person 构造函数创建的对象都能够使用 sayHello 方法了。这就像家族中的长辈传授给子孙后代一门独特的技能一样。

二、家族的传承：原型链

原型链就像是一条长长的链子，将家族中的成员连接起来。当我们访问一个对象的属性或方法时，JavaScript 引擎会沿着这条链子向上查找，直到找到匹配的属性或方法，或者到达链子的尽头。

let person1 = new Person('Alice', 25);
person1.sayHello(); // 输出：Hello, my name is Alice

当我们调用 person1.sayHello() 时，JavaScript 引擎会先在 person1 对象本身查找 sayHello 方法，如果没有找到，就会沿着原型链向上查找，最终在 Person.prototype 上找到 sayHello 方法并执行。

三、家族的变迁：原型链的应用

原型链在 JavaScript 中有着广泛的应用：

• 创建自定义对象： 通过原型链，我们可以创建各种各样的自定义对象，比如 Animal、Car、House 等。
• 实现继承： 原型链是 JavaScript 实现继承的主要方式。我们可以通过原型链将一个对象的属性和方法继承给另一个对象。
• 模拟类： 虽然 JavaScript 没有传统的类，但是我们可以利用原型链来模拟类的行为。

四、家族的秘密花园：原型链的深入

上文我们把 JavaScript 的原型链比喻成一个家族的传承，通过原型链，家族成员可以继承祖先的财产和智慧。现在，让我们深入这个家族的秘密花园，探索更多关于原型链的奥秘。

1、原型链的查找过程

当我们访问一个对象的属性或方法时，JavaScript 引擎会沿着原型链向上查找，直到找到匹配的属性或方法，或者到达链的尽头（null）。这个查找过程就像我们查找家族族谱一样，一层一层向上寻找。

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log('Hello, my name is ' + this.name);
};let person1 = new Person('Alice');
person1.sayHello(); // 输出：Hello, my name is Alice

在这个例子中，当我们调用 person1.sayHello() 时，JavaScript 引擎会：

1. 在 person1 对象本身查找 sayHello 方法： 找不到。
2. 沿着 proto 属性向上查找，找到 Person.prototype： 找到 sayHello 方法。
3. 执行 sayHello 方法： 输出 “Hello, my name is Alice”。

2、原型链与构造函数的关系

构造函数是创建对象的模板，每个构造函数都有一个 prototype 属性，指向它的原型对象。原型对象上的属性和方法可以被所有由这个构造函数创建的对象所继承。

function Person(name) {// ...
}Person.prototype // 指向 Person 的原型对象

3、原型链与 proto 属性

每个对象都有一个 proto 属性，指向它的原型对象。通过 proto 属性，我们可以手动修改一个对象的原型。

let person1 = new Person('Alice');
console.log(person1.__proto__ === Person.prototype); // true

4、原型链的尽头

原型链的尽头是 null。当 JavaScript 引擎沿着原型链向上查找时，如果到达了 null，说明没有找到匹配的属性或方法。

5、原型链的缺陷

1. 原型污染：

Array.prototype.myCustomMethod = function() {// ...
};

在上面的例子中，会导致所有的数组对象都拥有一个额外的 myCustomMethod 方法，可能会造成意想不到的副作用。

• 解决方案：
  • 使用 ES6 的 Object.defineProperty 或 Object.seal 等方法来保护对象。
  • 尽量避免直接修改内置对象的原型。

2. 性能问题：

• 频繁的原型链查找可能会影响性能，尤其是在大型对象或复杂的继承结构中。
• 解决方案：
  • 缓存常用的属性或方法。
  • 优化代码结构，减少不必要的原型链查找。

五、原型链与闭包：相辅相成的 JavaScript 特性

原型链和闭包是 JavaScript 中两个非常重要的概念，它们在实现一些高级特性时，经常会相互配合。

1、闭包是什么？

闭包是指在函数内部定义的函数，这个内部函数可以访问外部函数的变量。即使外部函数已经执行完毕，内部函数仍然可以访问这些变量。

2、原型链是什么？

原型链是 JavaScript 中用来实现继承的一种机制。每个对象都有一个 __proto__ 属性，指向它的原型对象。当我们访问一个对象的属性时，如果对象本身没有这个属性，就会沿着原型链向上查找，直到找到这个属性或者到达原型链的尽头。

function Animal(name) {this.name = name;
}Animal.prototype.eat = function() {console.log(this.name + ' is eating.');
}function Dog(name, breed) {Animal.call(this, name);this.breed = breed;
}Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {console.log(this.name + ' is barking.');
}

3、原型链与闭包的结合

1. 私有属性和方法：

• 通过闭包创建私有变量：我们可以将一些属性和方法定义在闭包内部，使得它们只能在闭包内部访问，从而实现私有化。
• 利用原型链共享公共方法：将公共的方法定义在原型对象上，所有实例都可以共享。

function Person(name) {let age = 0; // 私有属性，只能在闭包内部访问this.name = name;this.sayHello = function() {console.log(`Hello, my name is ${this.name}, I am ${age} years old.`);};this.setAge = function(newAge) {age = newAge;};
}

在上面的例子中，age 是一个私有属性，只能通过 setAge 方法来修改。sayHello 方法则是一个公共方法，可以通过原型链被所有实例共享。

function Counter() {let count = 0;this.increment = function() {count++;}this.getCount = function() {return count;}
}

在上面的例子中，展示了如何使用闭包来实现私有变量，只能通过 increment 和 getCount 方法来修改、获取 count 变量。

2. 模块化：

• 使用闭包创建模块：我们可以使用闭包来创建一个模块，将模块的内部状态隐藏起来。
• 利用原型链共享模块的方法：将模块的方法定义在原型对象上，让多个模块共享这些方法。

function createModule() {let privateData = 'This is private data';return {publicMethod: function() {console.log(privateData);}};
}let module1 = createModule();
module1.publicMethod(); // 输出：This is private data

六、扩展到 ES6+：类语法与原型链

ES6 引入了 class 语法，让 JavaScript 的面向对象编程更加直观。然而，class 只是语法糖，底层仍然是基于原型链实现的。

1、class 语法与原型链的关系

• class 关键字：
  • class 关键字定义了一个类，这个类本质上是一个构造函数。
  • 类中的方法会自动添加到类的原型上。
• constructor 方法：
  • constructor 方法用于初始化对象，类似于传统的构造函数。
• extends 关键字：
  • extends 关键字用于实现继承，子类会继承父类的原型。

// ES5 的写法
function Person(name) {this.name = name;
}
Person.prototype.sayHello = function() {console.log('Hello, my name is ' + this.name);
};// ES6 的写法
class Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}

这两段代码本质上是等价的。在 ES6 的写法中，sayHello 方法被自动添加到 Person.prototype 上。

2、继承

// ES5 的写法
function Student(name, grade) {Person.call(this, name);this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.study = function() {console.log('I am studying.');
};// ES6 的写法
class Student extends Person {constructor(name, grade) {super(name);this.grade = grade;}study() {console.log('I am studying.');}
}

• extends 关键字表示 Student 类继承自 Person 类。
• super 关键字用于调用父类的构造函数。

七、总结

JavaScript 原型链就像是一个家族的传承，将对象的属性和方法连接起来，使得 JavaScript 对象之间能够共享特性，即通过将对象的属性和方法连接起来，实现了对象的继承和复用。虽然 ES6 引入了 class 语法，但底层仍然是基于原型链实现的。深入理解原型链，不仅有助于我们写出更优雅的代码，还能更好地掌握 JavaScript 的运行机制，为我们构建复杂的 Web 应用程序打下坚实的基础。

原文地址