在 JavaScript 中，原型链是一个重要且基础的概念，它决定了对象属性的查找规则以及继承机制。通过原型链，JavaScript 实现了面向对象编程中的继承功能。本文将详细介绍什么是原型链、它是如何工作的，并通过实例来说明如何在实际开发中应用原型链。
一、什么是原型链？
原型链是 JavaScript 对象的继承机制。每个 JavaScript 对象（包括函数）都有一个内部属性 [[Prototype]]，我们通常通过 __proto__ 或 Object.getPrototypeOf 来访问它。这个属性指向另一个对象，这个对象也有自己的 [[Prototype]]，从而形成一个链条，直到找到一个 [[Prototype]] 为 null 的对象为止，这个链条就是原型链。
基本结构图：
object ---> prototype (of object) ---> prototype (of prototype) ---> ... ---> null
当访问一个对象的属性时，JavaScript 引擎首先会在对象自身的属性中查找。如果没有找到，就会沿着原型链向上查找，直到找到该属性或到达链条末尾（null）。
二、原型链的工作原理
要理解原型链的工作原理，首先需要了解 JavaScript 中的构造函数和原型对象。
1. 构造函数与原型对象
当使用构造函数创建一个对象时，构造函数的 prototype 属性指向一个对象，这个对象称为原型对象。新创建的对象的 [[Prototype]] 属性会被设置为这个原型对象。
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log("Hello, " + this.name);
};
const person1 = new Person("Alice");
person1.greet(); // 输出 "Hello, Alice"
在这个例子中，Person 是一个构造函数，Person.prototype 是它的原型对象。当我们创建 person1 时，person1 的 [[Prototype]] 被设置为 Person.prototype。因此，当调用 person1.greet() 时，JavaScript 引擎会在 person1 对象中查找 greet 方法，找不到时沿着原型链查找，最终在 Person.prototype 上找到 greet 方法并调用它。
2. 对象的继承
JavaScript 通过原型链实现继承。通过原型链，子类可以继承父类的方法和属性。
示例：继承与原型链
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(this.name + " makes a noise.");
};
function Dog(name, breed) {
Animal.call(this, name); // 继承属性
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 继承方法
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function () {
console.log(this.name + " barks.");
};
const myDog = new Dog("Rex", "German Shepherd");
myDog.speak(); // 输出 "Rex makes a noise."
myDog.bark(); // 输出 "Rex barks."
在这个例子中，Dog 构造函数通过 Object.create(Animal.prototype) 将 Animal 的原型链设置为 Dog 的原型，这样 Dog 对象不仅拥有 Dog.prototype 上定义的 bark 方法，还继承了 Animal.prototype 上的 speak 方法。这种方式使得 Dog 类可以拥有 Animal 类的功能，而不需要在每个实例上重新定义这些功能。
三、原型链的实际应用
原型链在实际开发中有很多应用，以下是几个常见的场景：
1. 对象属性的查找
如前所述，当访问对象的属性时，JavaScript 引擎会沿着原型链查找。这在需要实现对象的继承或扩展时非常有用。
const obj = { a: 1 };
const obj2 = Object.create(obj);
console.log(obj2.a); // 输出 1
obj2 对象没有 a 属性，因此引擎沿着原型链在 obj 中找到了 a 属性。
2. 共享方法和属性
通过将方法和属性定义在构造函数的原型上，所有实例对象都可以共享这些方法和属性，而不必为每个实例单独创建。
function Car(model) {
this.model = model;
}
Car.prototype.getModel = function () {
return this.model;
};
const car1 = new Car("Toyota");
const car2 = new Car("Honda");
console.log(car1.getModel()); // 输出 "Toyota"
console.log(car2.getModel()); // 输出 "Honda"
在这个例子中，getModel 方法被定义在 Car.prototype 上，因此 car1 和 car2 都可以共享同一个方法，而不必在每个实例上重复定义。
3. 类式继承
在 JavaScript 中，可以通过原型链模拟类的继承，从而实现代码复用和逻辑抽象。
function Employee(name, position) {
this.name = name;
this.position = position;
}
Employee.prototype.getDetails = function () {
return this.name + " works as a " + this.position;
};
function Manager(name, position, department) {
Employee.call(this, name, position);
this.department = department;
}
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.getDepartment = function () {
return this.department;
};
const manager = new Manager("Bob", "Manager", "Sales");
console.log(manager.getDetails()); // 输出 "Bob works as a Manager"
console.log(manager.getDepartment()); // 输出 "Sales"
通过使用 Object.create(Employee.prototype)，Manager 类继承了 Employee 类的所有方法，使得 Manager 实例既可以使用 Employee 的方法，也可以拥有自己独特的方法。
四、原型链的局限性与注意事项
尽管原型链在 JavaScript 中非常强大，但它也有一些局限性和需要注意的地方：
1. 性能问题
由于属性查找需要沿着原型链逐级查找，如果链条过长，可能会导致性能问题。因此，尽量保持原型链的长度适中，避免不必要的深层次继承。
2. 属性遮蔽
如果一个对象的自身属性与原型链中的某个属性同名，则会“遮蔽”原型链上的属性，这可能会导致意外的结果。
const obj = { a: 2 };
const obj2 = Object.create(obj);
obj2.a = 3;
console.log(obj2.a); // 输出 3 （自身属性）
console.log(obj.a); // 输出 2 （原型链属性）
3. 操作原型链的风险
直接操作对象的原型链（例如使用 __proto__ 或 Object.setPrototypeOf）可能会导致代码的可维护性变差，并且可能引入难以调试的问题。推荐使用 Object.create 等更安全的方法来管理原型链。
五、总结
原型链是 JavaScript 中实现继承的核心机制，它允许对象共享方法和属性，并通过构造函数和原型对象实现类式继承。通过理解原型链的工作原理和实际应用，开发者可以更好地组织代码，实现更高效的继承和属性查找机制。
在实际开发中，掌握原型链不仅能帮助你编写更清晰、更具扩展性的代码，还能让你更深入地理解 JavaScript 的底层原理。如果你在项目中遇到需要实现继承、共享逻辑或优化对象结构的场景，原型链将是你不可或缺的工具。
通过这篇文章，希望你对原型链有了更加深入的理解，并能在实际开发中灵活运用它。
P.S.
本文首发于我的个人网站www.aifeir.com，若你觉得有所帮助，可以点个爱心鼓励一下，如果大家喜欢这篇文章，希望多多转发分享，感谢大家的阅读。
