JavaScript面试题之原型链详解

JavaScript继承详解：从原型链到ES6的终极指南

在JavaScript中，继承是实现代码复用和逻辑组织的核心机制。虽然JS没有传统面向对象语言中的“类”，但通过原型链和多种技巧，开发者可以实现灵活且高效的继承。本文将结合实例，通俗解读七种主流继承方式，并分析其优缺点与适用场景。

一、原型链继承：家族传承的DNA

原理：子类的原型指向父类的实例，形成链式继承关系。

function Parent() { this.name = 'Parent'; }
Parent.prototype.say = function() { console.log(this.name); };function Child() {}
Child.prototype = new Parent(); // 关键：子类原型链继承父类
const child = new Child();
child.say(); // 输出 "Parent"

优点：简单直观，能继承父类原型方法。

缺点：

数据污染：所有子类实例共享父类的引用属性（如数组）。
无法传参：无法在创建子类时向父类构造函数传递参数。

比喻：像家族继承，所有孩子共享祖传的家谱，但若一人修改家谱，全家受影响。

二、构造函数继承：复制粘贴的硬拷贝

原理：在子类构造函数中调用父类构造函数（Parent.call(this)），复制父类实例属性。

function Parent(name) { this.name = name; }
function Child(name) { Parent.call(this, name); // 关键：父类属性复制到子类实例this.type = 'Child';
}
const child = new Child('Tom');
console.log(child.name); // 输出 "Tom"

优点：

解决引用属性共享问题，每个实例独立。
支持向父类传参。

缺点：无法继承父类原型上的方法（如Parent.prototype.say）。

比喻：像复印机，每个孩子拿到父辈的财产副本，但无法继承家族手艺（原型方法）。

三、组合继承：两全其美的经典方案

原理：结合原型链继承（方法继承）和构造函数继承（属性继承）。

function Parent(name) { this.name = name; this.colors = ['red', 'blue'];
}
Parent.prototype.say = function() { console.log(this.name); };function Child(name) {Parent.call(this, name); // 继承属性（第二次调用Parent）
}
Child.prototype = new Parent(); // 继承方法（第一次调用Parent）
Child.prototype.constructor = Child; // 修复构造函数指向const child1 = new Child('Alice');
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']

优点：既能继承属性又能继承方法，引用属性独立。

缺点：父类构造函数被调用两次，导致子类原型中存在冗余属性。

比喻：先复印财产，再继承家训，但家族档案里多出一份冗余记录。

四、原型式继承：无构造函数的轻量继承

原理：基于已有对象创建新对象（类似Object.create()）。

const parent = { name: 'Parent', say() { console.log(this.name); } };
const child = Object.create(parent);
child.name = 'Child';
child.say(); // 输出 "Child"

优点：无需构造函数，适合简单对象继承。

缺点：引用属性共享（同原型链继承）。

适用场景：快速克隆已有对象，如配置项继承。

五、寄生式继承：增强版原型式继承

原理：在原型式继承基础上，为子类添加额外方法。

function createChild(parent) {const child = Object.create(parent);child.sayHi = function() { console.log('Hi!'); }; // 扩展方法return child;
}

优点：灵活扩展对象功能。

缺点：方法重复创建，内存占用高。

比喻：在克隆的基础上，给每个孩子定制新技能，但每个技能需单独打造。

六、寄生组合式继承：完美的终极方案

原理：通过Object.create()继承父类原型，避免调用两次父类构造函数。

function inheritPrototype(Child, Parent) {const prototype = Object.create(Parent.prototype); // 创建父类原型副本prototype.constructor = Child; // 修正构造函数Child.prototype = prototype;
}function Parent(name) { this.name = name; }
Parent.prototype.say = function() { console.log(this.name); };function Child(name) { Parent.call(this, name); }
inheritPrototype(Child, Parent); // 关键：寄生继承const child = new Child('Bob');
child.say(); // 输出 "Bob"

优点：

仅调用一次父类构造函数，无冗余属性。
支持方法继承和属性独立。

推荐场景：复杂项目中的最佳实践。

七、ES6 Class继承：语法糖的优雅实现

原理：通过extends和super简化继承，底层仍基于原型链。

class Parent {constructor(name) { this.name = name; }say() { console.log(this.name); }
}class Child extends Parent {constructor(name) {super(name); // 必须调用super()this.type = 'Child';}
}const child = new Child('Lucy');
child.say(); // 输出 "Lucy"

优点：语法简洁，接近传统面向对象语言。

缺点：本质仍是原型继承，需理解底层机制。

适用场景：现代项目开发，尤其是团队协作。

总结：如何选择继承方式？

继承方式	适用场景	推荐指数
原型链继承	简单原型方法继承	⭐⭐
构造函数继承	需要属性独立且无需原型方法	⭐⭐⭐
组合继承	传统项目兼容性要求高	⭐⭐⭐
寄生组合式继承	复杂项目追求性能与完美	⭐⭐⭐⭐⭐
ES6 Class继承	现代项目开发，语法简洁	⭐⭐⭐⭐⭐