1. 从“原型链”到“类”JavaScript继承的演进与核心如果你是从Java或C这类“正经”的面向对象语言转战前端的第一次接触JavaScript的继承大概率会感到一阵眩晕。为什么一个对象可以直接访问另一个对象上不存在的属性为什么构造函数和prototype属性如此重要为什么ES6引入了class关键字但大家又说它只是“语法糖”这些困惑都源于JavaScript那套独特而又强大的基于原型的继承机制。与基于类的语言不同JavaScript没有“类”的实体在ES6之前只有对象。继承的本质是一个对象通过内部的[[Prototype]]链在代码中可通过__proto__访问但更推荐使用Object.getPrototypeOf()访问到另一个对象的属性和方法。理解这条链是理解JavaScript面向对象编程的钥匙。而ES6的class语法则是在这套原型系统之上构建了一套更符合传统开发者直觉的、声明式的语法极大地提升了代码的可读性和可维护性。本文将带你从最底层的原型链开始逐步拆解JavaScript中实现继承的各种方式最终理解现代class继承的运作原理让你不仅能写出正确的继承代码更能洞悉其背后的设计哲学。2. 原型链继承理解JavaScript继承的基石在JavaScript中每个函数除了箭头函数和Function.prototype.bind创建的函数都有一个prototype属性它是一个对象。当使用new操作符调用这个函数此时它被称为构造函数时会创建一个新对象这个新对象的内部[[Prototype]]链就会指向构造函数的prototype对象。2.1 原型链的构建与查找机制让我们从一个最简单的例子开始看看原型链是如何工作的。function Animal(name) { this.name name; this.collection [bone, toy]; } Animal.prototype.sayName function() { console.log(My name is ${this.name}); }; function Dog(name, breed) { this.name name; // 这里直接覆盖了从Animal继承来的name但这是独立的实例属性 this.breed breed; } // 关键一步建立原型链 Dog.prototype new Animal(); // 不推荐此处仅为演示 let dog1 new Dog(Buddy, Golden Retriever); console.log(dog1.name); // Buddy - 来自Dog构造函数 console.log(dog1.breed); // Golden Retriever - 来自Dog构造函数 dog1.sayName(); // My name is Buddy - 方法来自Animal.prototype通过原型链找到 console.log(dog1.collection); // [bone, toy] - 属性来自Animal实例即Dog.prototype // 验证原型链 console.log(dog1.__proto__ Dog.prototype); // true console.log(Dog.prototype.__proto__ Animal.prototype); // true console.log(Animal.prototype.__proto__ Object.prototype); // true console.log(Object.prototype.__proto__); // null这段代码揭示了原型链的完整路径dog1 - Dog.prototype (一个Animal实例) - Animal.prototype - Object.prototype - null。当访问dog1.sayName()时引擎首先在dog1自身查找sayName方法没找到于是沿着__proto__找到Dog.prototype即那个Animal实例依然没找到继续向上找到Animal.prototype终于找到了于是调用它并且函数内部的this被绑定为dog1。注意上面例子中Dog.prototype new Animal()是一种经典的、但不推荐的实现方式通常被称为“原型链继承”。它的问题非常明显所有Dog的实例将共享同一个Animal实例作为原型这会导致引用类型属性如collection数组被所有实例共享造成意外的数据污染。我们稍后会讨论更好的替代方案。2.2 原型链继承的致命缺陷与边界为什么说“原型链继承”Child.prototype new Parent()问题很大我们通过一个例子来暴露它。function Parent() { this.colors [red, blue, green]; } function Child() {} Child.prototype new Parent(); // 不推荐的经典原型链继承 let instance1 new Child(); instance1.colors.push(black); console.log(instance1.colors); // [red, blue, green, black] let instance2 new Child(); console.log(instance2.colors); // [red, blue, green, black] !!!问题显而易见instance1和instance2的原型都是同一个Parent实例因此它们共享了同一个colors数组。修改instance1.colorsinstance2.colors也会同步变化这几乎从来都不是我们想要的效果。此外这种方式无法在创建子类实例时向父类构造函数传递参数因为new Parent()在定义子类时就执行了参数是写死的。因此纯粹的“原型链继承”在实际开发中已被淘汰但它作为理解JavaScript继承机制的基础其价值不可磨灭。它清晰地展示了属性查找的路径和共享原型对象的潜在风险。3. 构造函数继承解决属性独立性的经典思路为了解决原型链继承中引用属性共享的问题开发者们想到了另一种思路在子类构造函数内部调用父类构造函数。这样每个子类实例都会拥有一份独立的父类属性副本。3.1 借用构造函数模式这种模式的核心是使用call()或apply()方法在子类构造函数的上下文中执行父类构造函数。function Parent(name) { this.name name; this.colors [red, blue]; } function Child(name, age) { // 关键在子类实例this的上下文中执行父类构造函数 Parent.call(this, name); // 第二次调用Parent this.age age; } let child1 new Child(Alice, 5); child1.colors.push(green); console.log(child1); // Child { name: Alice, colors: [red, blue, green], age: 5 } let child2 new Child(Bob, 3); console.log(child2.colors); // [red, blue] - 独立不受child1影响通过Parent.call(this, name)我们相当于在new Child()创建的新对象上运行了一遍Parent函数体从而将name和colors属性直接添加到了这个新对象上。这样每个Child实例都拥有自己独立的colors数组完美解决了共享问题。同时我们也能灵活地向父类构造函数传递参数。3.2 构造函数继承的局限性然而这种方法也有一个显著的缺点它无法继承父类原型Parent.prototype上定义的方法。Parent.prototype.sayName function() { console.log(this.name); }; let child3 new Child(Charlie, 7); // child3.sayName(); // TypeError: child3.sayName is not a function因为Parent.call(this)只复制了父类构造函数内部的属性和方法到子类实例上父类原型上的方法并没有被“复制”过来。子类实例与Parent.prototype之间没有建立原型链连接。这导致所有需要复用的方法都必须在父类构造函数内部定义违背了将方法定义在原型上以节省内存的初衷。因此单纯的构造函数继承也很少单独使用。我们需要一种结合两者优点的方案。4. 组合继承扬长避短的经典范式组合继承有时也被称为伪经典继承是JavaScript中最常用的继承模式。它的思路很简单使用原型链实现对原型属性和方法的继承同时通过借用构造函数来实现对实例属性的继承。4.1 组合继承的实现步骤与原理function Parent(name) { this.name name; this.colors [red, blue]; } Parent.prototype.sayName function() { console.log(this.name); }; function Child(name, age) { // 1. 借用构造函数继承实例属性 Parent.call(this, name); // 第二次调用Parent this.age age; } // 2. 建立原型链继承原型方法 Child.prototype new Parent(); // 第一次调用Parent // 3. 修复constructor指向 Child.prototype.constructor Child; // 4. 可选在子类原型上添加方法 Child.prototype.sayAge function() { console.log(this.age); }; let instance1 new Child(Nicholas, 5); instance1.colors.push(black); console.log(instance1.colors); // [red, blue, black] instance1.sayName(); // Nicholas instance1.sayAge(); // 5 let instance2 new Child(Greg, 3); console.log(instance2.colors); // [red, blue] - 独立 instance2.sayName(); // Greg instance2.sayAge(); // 3让我们拆解这个流程Parent.call(this, name)在创建Child实例时执行父类构造函数将name和colors等实例属性初始化到子类实例上。这保证了每个实例的属性独立。Child.prototype new Parent()将子类的原型对象设置为一个父类的实例。这建立了原型链使得子类实例可以访问父类原型上的方法如sayName。Child.prototype.constructor Child由于上一步重写了Child.prototype其constructor属性会指向Parent。手动将其纠正回Child保持语义的正确性。组合继承融合了原型链和构造函数的优点既保证了方法的复用又保证了实例属性的独立性因此得到了广泛应用。4.2 组合继承的效率问题与优化细心的你可能发现了组合继承有一个小瑕疵父类构造函数被调用了两次。第一次Child.prototype new Parent()这次调用是为了建立原型链它会在Child.prototype上创建一组name和colors属性。第二次在创建Child实例时Parent.call(this, name)这次调用是在实例上创建另一组name和colors属性。最终实例上的属性会屏蔽掉原型链上的同名属性这是JavaScript的属性屏蔽机制所以功能上没问题。但原型对象Child.prototype上那组多余的属性就成为了永远用不到的内存浪费。为了解决这个问题后续又出现了“寄生组合式继承”它被公认为JavaScript中最理想的继承范式。其核心是不通过调用父类构造函数来为子类原型赋值而是直接获取父类原型的一个副本。5. 寄生组合式继承ES6class的底层逻辑寄生组合式继承是组合继承的优化版本它避免了在子类原型上创建不必要的、多余的父类实例属性。5.1 使用Object.create()实现原型链的纯净连接ES5 提供的Object.create()方法是实现寄生组合式继承的关键。它创建一个新对象并将这个新对象的[[Prototype]]指向传入的对象。function inheritPrototype(child, parent) { // 1. 创建父类原型对象的副本作为子类的原型 let prototype Object.create(parent.prototype); // 关键没有调用parent构造函数 // 2. 修复副本的constructor指向 prototype.constructor child; // 3. 将副本赋值给子类的原型 child.prototype prototype; } function Parent(name) { this.name name; this.colors [red, blue]; } Parent.prototype.sayName function() { console.log(this.name); }; function Child(name, age) { // 借用构造函数继承实例属性仅此一次调用Parent Parent.call(this, name); this.age age; } // 使用自定义函数建立原型链 inheritPrototype(Child, Parent); // 添加子类原型方法 Child.prototype.sayAge function() { console.log(this.age); }; let child new Child(Kevin, 6); console.log(child instanceof Child); // true console.log(child instanceof Parent); // true console.log(child.__proto__ Child.prototype); // true console.log(child.__proto__.__proto__ Parent.prototype); // true child.sayName(); // Kevin child.sayAge(); // 6通过Object.create(parent.prototype)我们创建了一个以Parent.prototype为原型的空对象然后将它赋值给Child.prototype。这样Child.prototype就能访问Parent.prototype的所有方法同时它自身是一个干净的对象没有Parent的实例属性。父类构造函数Parent只在创建子类实例时被调用一次效率最高。5.2 从寄生组合式继承到 ES6classES6 引入的class语法其内部的extends关键字实现继承的机制本质上就是寄生组合式继承。class语法让我们可以用更清晰、更声明式的方式书写继承关系而无需手动操作复杂的原型链。class Parent { constructor(name) { this.name name; this.colors [red, blue]; } sayName() { console.log(this.name); } } class Child extends Parent { constructor(name, age) { super(name); // 相当于 Parent.call(this, name) this.age age; } sayAge() { console.log(this.age); } } let child new Child(Emma, 8); child.colors.push(yellow); console.log(child.colors); // [red, blue, yellow] child.sayName(); // Emma child.sayAge(); // 8 let child2 new Child(Liam, 4); console.log(child2.colors); // [red, blue] - 独立class语法糖让我们专注于逻辑本身extends关键字自动建立了正确的原型链即寄生组合式继承。super()必须在子类构造函数中首先调用它负责初始化父类定义的实例属性即借用构造函数。所有方法都自动定义在类的prototype上。在Babel等工具将ES6代码转译为ES5时生成的代码结构与我们的inheritPrototype函数和Parent.call(this)调用如出一辙。理解底层的原型和寄生组合式继承能让你在使用class时更加得心应手尤其是在调试和解决一些深层问题时。6.class继承的进阶细节与实战避坑虽然class语法极大地简化了继承但在实际使用中仍有不少细节需要注意否则很容易掉进坑里。6.1super关键字的两种角色与使用时机super在class中有两种用法含义完全不同作为函数调用 (super(...args))只能在子类的constructor中使用代表父类的构造函数。ES6规定子类的构造函数必须执行一次super()否则新建实例时会报错。这是因为子类实例的构建基于父类实例只有super()才能返回父类实例的this然后子类再对其进行加工。作为对象调用 (super.method()或super.property)在子类的普通方法或静态方法中super指向父类的原型对象Parent.prototype或父类本身静态方法中用于调用父类的方法或访问属性。class Parent { static staticMethod() { return static parent; } instanceMethod() { return instance parent; } } class Child extends Parent { static staticMethod() { return super.staticMethod() - child static; // super指向父类Parent } instanceMethod() { return super.instanceMethod() - child instance; // super指向Parent.prototype } constructor() { super(); // 作为函数调用 console.log(this.instanceMethod()); // 可以访问 } } console.log(Child.staticMethod()); // static parent - child static let obj new Child(); // 输出: instance parent - child instance踩坑实录在子类构造函数中必须在访问this之前调用super()。因为子类实例的构建必须先完成父类实例的初始化super()的作用就是创建这个父类实例的上下文即this。如果先写this.name xx再写super()引擎会直接抛出ReferenceError。6.2 继承内置引用类型与Symbol.speciesJavaScript内置的引用类型如Array,Map,Set等也可以被继承。这为创建具有特殊功能的集合类型提供了可能。class MyArray extends Array { // 可以添加自定义方法 first() { return this[0]; } last() { return this[this.length - 1]; } } let myArr new MyArray(1, 2, 3); console.log(myArr.first()); // 1 console.log(myArr.last()); // 3 console.log(myArr instanceof Array); // true console.log(myArr instanceof MyArray); // true这里有一个高级细节当你在子类化内置类型如Array并调用其会返回新实例的方法如map,filter,slice时你希望返回的是子类的实例还是父类Array的实例这由静态访问器属性Symbol.species决定。class MyArray extends Array { static get [Symbol.species]() { return Array; // 指定衍生对象使用Array构造函数 } } let myArr new MyArray(1, 2, 3); let mapped myArr.map(x x * 2); console.log(mapped instanceof MyArray); // false console.log(mapped instanceof Array); // true默认情况下Symbol.species返回this即当前构造函数所以map等操作返回的是子类实例。如果你重写它返回父类构造函数那么这些方法就会返回父类的实例。这在设计库或框架时非常有用可以控制衍生对象的类型。6.3new.target与抽象基类的模拟new.target是一个元属性用在构造函数或类中它返回new命令所作用的构造函数。如果构造函数不是通过new调用的new.target会返回undefined。在类的继承中它指向直接执行的构造函数。我们可以利用这个特性来模拟“抽象基类”——即不能被直接实例化只能被继承的类。class AbstractClass { constructor() { if (new.target AbstractClass) { throw new Error(AbstractClass cannot be instantiated directly.); } // 可以在这里定义一些所有子类都必须初始化的逻辑 if (!this.requiredMethod) { throw new Error(Subclass must implement requiredMethod.); } } } class ConcreteClass extends AbstractClass { requiredMethod() { console.log(Implemented!); } } // let abstract new AbstractClass(); // Error: AbstractClass cannot be instantiated directly. let concrete new ConcreteClass(); // OK concrete.requiredMethod(); // Implemented!这个技巧在构建大型、严谨的类库时非常实用它能强制定义清晰的类继承契约。7. 现代JavaScript继承的最佳实践与模式选择经过前面的层层剖析我们已经掌握了从底层原型链到现代class语法的完整继承图谱。在实际项目中如何选择和应用这些知识呢7.1 模式选择指南何时用什么ES6 环境无脑使用class和extends这是现代JavaScript开发的绝对标准。它语法简洁、意图清晰、符合主流编程范式并且其底层实现寄生组合式继承是最优的。Babel等工具可以帮你兼容到旧环境。维护遗留ES5代码库如果项目不能使用ES6那么组合继承是相对稳妥和易懂的选择。虽然有效率瑕疵但在大多数应用场景下其额外开销可以忽略不计且代码结构清晰。追求极致的性能与内存效率库/框架开发在编写底层工具库或框架且需要支持ES5环境时可以考虑手动实现寄生组合式继承。虽然代码稍显复杂但它是性能最优的实现。纯粹的原型链继承和构造函数继承永远不要单独使用。它们各自有无法弥补的缺陷仅作为学习理解原型机制的历史标本存在。7.2 面向对象设计在JavaScript中的思考JavaScript的基于原型的面向对象与基于类的面向对象在思维上有所不同。在JavaScript中更强调的是对象的行为委托而不是严格的类层级分类。class语法虽然提供了类的外表但其内核依然是原型委托。优先使用组合而非继承这是软件工程中的通用原则在JavaScript中同样重要。如果一个功能可以通过将另一个对象作为属性组合来实现通常比继承更灵活、耦合度更低。例如一个Car类拥有一个Engine实例属性比让Car继承Engine更合理。“鸭子类型”的灵活应用JavaScript是动态类型语言关注对象“能做什么”有什么方法而不是它“是什么”属于哪个类。如果一个对象有quack方法和walk方法我们可以把它当作鸭子来用而不必关心它是否继承自某个Duck类。这种灵活性是JavaScript的优势。利用Mixin模式扩展功能当需要为多个不相关的类添加相同功能时继承会创建混乱的层级。这时可以使用Mixin混入模式即一个包含特定方法的对象通过Object.assign等方式将其方法复制到目标类的原型上。// 一个简单的Mixin例子 let sayMixin { say(phrase) { console.log(phrase); } }; let sayHiMixin { __proto__: sayMixin, // 或者用Object.setPrototypeOf sayHi() { super.say(Hello ${this.name}); // 可以调用父Mixin的方法 }, sayBye() { super.say(Bye ${this.name}); } }; class User { constructor(name) { this.name name; } } // 将Mixin的方法拷贝到User原型上 Object.assign(User.prototype, sayHiMixin); new User(John).sayHi(); // Hello John7.3 调试与性能分析中的继承视角当你在调试复杂的继承链条时以下工具和技巧会很有帮助instanceof与Object.getPrototypeOf()instanceof操作符检查构造函数的prototype属性是否出现在对象的原型链上。Object.getPrototypeOf(obj)是获取对象原型链的标准方法比直接访问__proto__更推荐。浏览器开发者工具中的原型链展示在Console中打印一个对象展开其__proto__属性可以清晰地看到完整的原型链结构。性能考量原型链过长会影响属性查找的性能因为引擎需要逐级向上搜索。在极端性能敏感的场景下应避免过深的继承层次。将常用方法直接定义在对象自身或较近的原型上可以减少查找时间。不过在绝大多数业务场景中现代JavaScript引擎的优化已经做得非常好这点性能差异通常无需过度担心。