作者｜小周sir
在JavaScript的世界里，原型链（Prototype Chain）是一个既强大又复杂的机制，它支撑着JavaScript的对象继承体系。理解原型链不仅能够帮助你更好地掌握JavaScript的核心特性，还能在开发过程中解决许多棘手的问题。本文将带你深入探索JavaScript原型链的工作原理、应用场景及实战技巧。
一、什么是原型链？
JavaScript中的每个对象都有一个与之关联的对象——原型（Prototype）。这个原型对象本身也可以有自己的原型，依此类推，直到某个对象的原型为null。这种由多个对象通过原型连接起来的链式结构，就是原型链。
每个对象从其原型链上继承属性和方法。当你尝试访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎就会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。
二、原型链的工作原理
对象创建：当你创建一个新对象时，可以指定一个对象作为它的原型。如果不指定，则默认使用Object.prototype作为原型。
属性访问：当你访问一个对象的属性时，如果该对象没有这个属性，JavaScript会查找它的原型对象是否有这个属性，然后依次向上查找，直到找到该属性或到达原型链的顶端。
方法继承：同样地，方法也是通过原型链继承的。这意味着你可以在一个对象上调用其原型链中定义的方法。
原型链的终点：所有原型链最终都会指向null，这是原型链的终点。
三、原型链的实战应用
1、属性与方法共享：
通过原型链，你可以让多个对象共享相同的属性和方法，从而节省内存。例如，创建一个构造函数，并在其原型上定义方法，这样所有通过该构造函数创建的对象都能共享这个方法。
function Person(name) {this.name = name;}Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);};const alice = new Person("Alice");const bob = new Person("Bob");alice.sayHello(); // Hello, my name is Alicebob.sayHello(); // Hello, my name is Bob
2、实现继承：
虽然ES6引入了class语法来模拟传统的面向对象编程中的类继承，但原型链仍然是实现继承的基础。你可以通过设置一个对象的原型为另一个对象来实现继承。
function Animal(name) {this.name = name;}Animal.prototype.speak = function() {console.log(`${this.name} makes a sound.`);};function Dog(name, breed) {Animal.call(this, name); // 借用构造函数继承属性this.breed = breed;}// 设置Dog的原型为Animal的一个实例，实现原型链继承方法Dog.prototype = Object.create(Animal.prototype);Dog.prototype.constructor = Dog;Dog.prototype.bark = function() {console.log(`${this.name} barks.`);};const d = new Dog("Rex", "German Shepherd");d.speak(); // Rex makes a sound.d.bark(); // Rex barks.
（如Array.prototype.map、Array.prototype.filter）利用了原型链，使得所有数组实例都可以直接调用这些方法，无需显式定义。
const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8, 10]
四、注意事项
避免原型链污染：不当的操作可能会意外地修改对象的原型，导致原型链污染。因此，在扩展对象原型时要格外小心。
性能考虑：虽然原型链提供了灵活的继承机制，但过深的原型链可能会影响性能，因为每次属性访问都可能需要沿着原型链进行多次查找。
五、总结
原型链是JavaScript中一个既强大又复杂的特性，它允许对象共享方法和属性，实现灵活的继承。通过深入理解原型链的工作原理和实战应用，你可以更好地利用JavaScript的面向对象编程特性，编写出更加高效、可维护的代码。无论是初学者还是经验丰富的开发者，掌握原型链都是深入理解JavaScript不可或缺的一部分。
