深入解析JavaScript原型链继承：从原理到ES6 Class的底层实现

1. 从“对象”到“继承”：为什么我们需要原型链？

如果你写过一段时间的JavaScript，尤其是从其他语言（比如Java、C#）转过来的，大概率会对JS的“面向对象”感到困惑。我们明明可以用function定义一个“类”，用new关键字创建“实例”，看起来和经典OOP语言很像。但当你试图实现一个简单的“继承”时，麻烦就来了：为什么我定义在父类function里的方法，子类的实例访问不到？为什么修改了父类的原型，子类的实例也跟着变了？这一切的根源，都指向了JavaScript中一个独特且核心的机制——原型链（Prototype Chain）。

在ES6的class语法糖普及之前，理解原型链是掌握JavaScript面向对象编程的基石。即便现在class用起来很顺手，但它的底层依然是原型链在运作。很多看似诡异的行为（比如instanceof的原理、for...in循环的遍历范围），以及一些高级技巧（如混入Mixin、对象关联），都离不开对原型链的深刻理解。今天，我们就抛开class，回到最本质的JavaScript，彻底拆解“原型链继承”是如何工作的，它的优势在哪，又有哪些“坑”在等着我们。

2. 原型与原型链：JavaScript的“血脉”系统

要理解继承，必须先理解原型。在JavaScript中，每个函数（除了箭头函数和某些特殊函数）都有一个prototype属性，它是一个对象。当你使用new操作符调用这个函数时，会创建一个新对象，这个新对象的内部[[Prototype]]（在大多数浏览器中可以通过__proto__属性访问）会指向构造函数的prototype对象。

这听起来有点绕，我们来看代码：

function Person(name) { this.name = name; } // 在Person的prototype上添加一个方法 Person.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; const alice = new Person('Alice'); const bob = new Person('Bob'); alice.sayHello(); // 输出: Hello, I'm Alice bob.sayHello(); // 输出: Hello, I'm Bob

这里发生了什么？

1. Person是一个构造函数，它有一个prototype属性，是一个空对象（最初只有constructor属性指回Person）。
2. 我们给Person.prototype添加了一个sayHello方法。
3. 通过new Person('Alice')创建alice对象。alice对象本身只有一个属性name: 'Alice'。
4. 当调用alice.sayHello()时，JavaScript引擎首先在alice对象自身查找sayHello属性，没找到。
5. 接着，引擎会沿着alice.__proto__（即Person.prototype）去查找，找到了！于是调用该方法，并且函数内部的this指向alice对象。

这个查找的路径——从对象自身，到它的__proto__，再到__proto__.__proto__，直至null——就是原型链。null是原型链的终点。这就像一条家族血脉：对象自身没有的能力，可以向上溯源，从它的“祖先”（原型对象）那里继承。

注意：__proto__是一个非标准但被广泛实现的属性，用于访问对象的内部[[Prototype]]。在ES5中，更推荐使用Object.getPrototypeOf(obj)来获取，用Object.setPrototypeOf(obj, prototype)来设置。但理解__proto__这个直观概念对学习很有帮助。

3. 实现原型链继承：连接两条“血脉”

理解了单个构造函数的原型，我们就可以让两个构造函数（父类和子类）的原型链连接起来，实现继承。核心目标是：让子类实例的原型链上能找到父类原型上的属性和方法。

最经典（也是问题最多）的实现方式如下：

// 父类构造函数 function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.sayName = function() { console.log(`My name is ${this.name}`); }; // 子类构造函数 function Dog(name, breed) { // 1. 调用父类构造函数，继承实例属性 Animal.call(this, name); // 关键！这步继承“实例属性” this.breed = breed; } // 2. 核心步骤：将子类的原型指向父类的一个实例 Dog.prototype = new Animal(); // 这步建立了原型链连接 // 3. 修正子类原型对象的constructor指针 Dog.prototype.constructor = Dog; // 4. 在子类原型上添加自己的方法 Dog.prototype.bark = function() { console.log('Woof! Woof!'); }; // 测试 const myDog = new Dog('Buddy', 'Golden Retriever'); myDog.sayName(); // 输出: My name is Buddy (从Animal.prototype继承) myDog.bark(); // 输出: Woof! Woof! (Dog.prototype自有) console.log(myDog instanceof Dog); // true console.log(myDog instanceof Animal); // true (原型链生效)

我们来拆解每一步的意图和潜在问题：

第一步：在子类构造函数中调用父类构造函数 (Animal.call(this, name))这行代码解决了“实例属性”的继承。它在新创建的Dog实例（this）的上下文中执行Animal函数，从而将Animal中定义的this.name和this.colors属性“复制”到Dog实例上。如果不做这一步，Dog实例将不会有name和colors属性。

第二步：Dog.prototype = new Animal()这是实现原型链继承的关键。它将Dog.prototype这个对象，替换成了Animal的一个实例。这意味着，Dog.prototype的原型链（__proto__）指向了Animal.prototype。因此，所有Dog的实例（如myDog）在查找属性时，如果在自身和Dog.prototype上找不到，就会继续沿着Dog.prototype.__proto__（即Animal.prototype）向上找，从而访问到sayName方法。

第三步：Dog.prototype.constructor = Dog由于第二步完全重写了Dog.prototype，导致Dog.prototype.constructor属性丢失，转而指向了Animal。这不符合预期（一个Dog实例的构造器应该是Dog），所以我们需要手动修正它。虽然这个属性在语言内部使用不多，但保持正确是一种良好的实践，某些库或代码可能会依赖它。

第四步：在子类原型上添加方法这一步必须在完成原型重写和修正constructor之后进行，否则新添加的方法会被覆盖掉。

4. 经典原型链继承的致命缺陷与实战避坑

上面看似完美的实现，在实际项目中却隐藏着几个严重的“坑”。我早期在项目中使用这种模式时，就曾因此导致过难以排查的Bug。

4.1 缺陷一：父类实例属性成为共享的“原型属性”

这是最经典的问题。看下面的代码：

const dog1 = new Dog('Dog1', 'Breed1'); const dog2 = new Dog('Dog2', 'Breed2'); dog1.colors.push('brown'); console.log(dog1.colors); // ['black', 'white', 'brown'] console.log(dog2.colors); // ['black', 'white', 'brown'] !!! 问题出现

为什么dog2的colors也被修改了？因为我们在第二步Dog.prototype = new Animal()时，创建了一个父类Animal的实例作为子类的原型。这个实例有自己的colors属性（值为['black', 'white']）。注意，这个属性是存在于Dog.prototype这个对象自身上的，而不是Dog.prototype.__proto__（即Animal.prototype）上。

对于所有Dog的实例（dog1,dog2）来说，当它们访问colors属性时，自身没有，就会去Dog.prototype上找，而Dog.prototype上正好有一个colors数组。于是，所有实例都共享了同一个数组引用！修改其中一个，自然会影响所有。

解决方案：这个问题的根源在于，我们把本该是“实例属性”的colors，通过new Animal()无意中变成了子类所有实例共享的“原型属性”。解决方法就是避免在创建子类原型时调用父类构造函数。这正是“构造函数继承”（第一步）和“原型链继承”（第二步）需要组合使用的原因。第一步的Animal.call(this, name)已经为每个实例单独创建了colors属性，所以我们应该让Dog.prototype上不要有colors属性。改进方法见下一节。

4.2 缺陷二：无法向父类构造函数传参

在Dog.prototype = new Animal()这一行，我们创建父类实例时，无法传递参数。在上面的例子中，我们调用的是new Animal()，参数是空的。这意味着，如果父类构造函数有一些必需的参数逻辑，在这里就无法执行。虽然这通常不影响原型方法的继承，但不够优雅，也可能在某些场景下引发问题。

4.3 缺陷三：性能与设计瑕疵

每次创建子类构造函数时，都需要调用一次父类构造函数来创建原型对象（new Animal()）。如果父类构造函数执行了复杂的操作（如DOM操作、网络请求），这可能会带来不必要的性能开销。而且，从设计上讲，子类的原型对象本身不应该是一个“实例”，它应该是一个干净的对象，只用于挂载子类共享的方法。

5. 优化方案：组合继承与寄生组合式继承

为了解决上述缺陷，社区在实践中演化出了更好的模式。

5.1 组合继承（Combination Inheritance）

组合继承结合了“构造函数继承”和“原型链继承”，是早期最常用的模式。

function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.sayName = function() { console.log(this.name); }; function Dog(name, breed) { // 1. 构造函数继承：继承实例属性 Animal.call(this, name); // 第二次调用父类构造函数 this.breed = breed; } // 2. 原型链继承：继承原型方法 Dog.prototype = new Animal(); // 第一次调用父类构造函数 Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log('Woof!'); }; const dog1 = new Dog('Max', 'Husky'); const dog2 = new Dog('Rocky', 'Labrador'); dog1.colors.push('gray'); console.log(dog1.colors); // ['black', 'white', 'gray'] console.log(dog2.colors); // ['black', 'white'] // 问题解决！ console.log(dog1.sayName === dog2.sayName); // true，方法共享

优点：

• 解决了引用类型属性共享的问题（colors现在是每个实例自己的）。
• 子类实例既能拥有独立的实例属性，又能共享父类原型上的方法。

缺点：

• 父类构造函数被调用了两次：一次在创建子类原型时（new Animal()），一次在创建子类实例时（Animal.call(this, ...)）。这导致子类原型对象（Dog.prototype）上也有一份父类的实例属性（name和colors），但这些属性被实例自身的属性屏蔽了，造成了不必要的冗余。

5.2 寄生组合式继承（Parasitic Combination Inheritance）—— 终极方案

这是目前公认的、基于原型链的最理想的继承方式。ES6的class语法糖在Babel等工具转译成ES5代码时，使用的就是这种模式。

function inheritPrototype(subType, superType) { // 1. 创建一个以父类原型为原型的新对象 const prototype = Object.create(superType.prototype); // 关键！没有调用构造函数 // 2. 修正这个新对象的constructor指针 prototype.constructor = subType; // 3. 将这个新对象赋值给子类的原型 subType.prototype = prototype; } function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.sayName = function() { console.log(this.name); }; function Dog(name, breed) { // 只在这里调用一次父类构造函数，继承实例属性 Animal.call(this, name); this.breed = breed; } // 使用辅助函数实现原型链连接，避免调用父类构造函数 inheritPrototype(Dog, Animal); // 添加子类自己的方法 Dog.prototype.bark = function() { console.log('Woof!'); }; // 测试 const dog1 = new Dog('Charlie', 'Poodle'); const dog2 = new Dog('Daisy', 'Beagle'); dog1.colors.push('gold'); console.log(dog1.colors); // ['black', 'white', 'gold'] console.log(dog2.colors); // ['black', 'white'] console.log(dog1 instanceof Dog); // true console.log(dog1 instanceof Animal); // true

核心剖析：Object.create(superType.prototype)是这里的魔法。它创建了一个全新的空对象，并将这个空对象的[[Prototype]]（即__proto__）直接设置为superType.prototype。这样，我们得到了一个纯净的、只连接了父类原型链的对象，用它作为子类的原型。完美避免了在子类原型上创建不必要的父类实例属性，也只需要调用一次父类构造函数。

优点：

• 只调用一次父类构造函数，效率高。
• 原型链保持干净，子类原型上不再有冗余的父类实例属性。
• 是引用类型属性继承的最优解。

6. 原型链继承的边界与instanceof的奥秘

理解了原型链，instanceof操作符的原理就一目了然了。obj instanceof Constructor的逻辑是：沿着obj的__proto__链向上查找，如果某个节点的__proto__等于Constructor.prototype，则返回true，否则直到null返回false。

console.log(myDog instanceof Dog); // true // 检查: myDog.__proto__ === Dog.prototype? 是，返回true。 console.log(myDog instanceof Animal); // true // 检查: myDog.__proto__ === Animal.prototype? 否 (myDog.__proto__是Dog.prototype) // 继续: myDog.__proto__.__proto__ === Animal.prototype? 是，返回true。 console.log(myDog instanceof Object); // true // 原型链: myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null

这也解释了为什么直接修改一个对象的__proto__（或使用Object.setPrototypeOf）可以动态改变其行为，但这是一个非常慢的操作，通常不推荐在生产中使用。

7. 从原型链到ES6 Class：语法糖下的本质

ES6引入的class关键字，让面向对象编程在语法上清晰了很多。

class Animal { constructor(name) { this.name = name; this.colors = ['black', 'white']; } sayName() { console.log(this.name); } } class Dog extends Animal { constructor(name, breed) { super(name); // 相当于之前的 Animal.call(this, name) this.breed = breed; } bark() { console.log('Woof!'); } }

class语法并没有引入新的继承模型，它只是上述寄生组合式继承的语法糖。extends关键字自动帮我们建立了正确的原型链。super()调用对应着在子类构造函数中调用父类构造函数。类中定义的方法，实际上就是添加到类的prototype属性上。

你可以用Object.getPrototypeOf来验证：

console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true

因此，学习原型链继承，不仅是为了理解历史代码，更是为了透彻理解现代JavaScript面向对象编程的根基。当你遇到class相关的问题（比如super的使用限制、静态方法的继承）时，回溯到原型链的视角，往往能豁然开朗。