JavaScript 继承模式详解:组合、原型、寄生与寄生组合式

作者:青柠

时间:2026-10-22

浏览:271

本文系统介绍 JavaScript 中的四种主要继承模式。首先解析组合继承(伪经典继承)如何结合原型链与构造函数;接着探讨原型式继承的浅复制机制;随后分析寄生式继承对对象的增强处理;最后重点阐述被业界视为最优方案的寄生组合式继承,解释其如何通过减少构造函数调用次数来优化性能并保持原型链完整。

文章目录

组合继承:原型链与构造函数的结合

组合继承,亦被称为伪经典继承,是一种将原型链机制与借用构造函数技术相结合的继承实现方式。

以下通过具体代码示例进行说明:


function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  alert(this.name);

 }

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承方法

 SubType.prototype = new SuperType();

 SubType.prototype.sayAge = function() {

  alert(this.age);

 }

 

 var instance1 = new SubType("Nicholas", 29);

 instance1.colors.push("black");

 alert(instance1.colors); //red,blue,green,black

 instance1.sayName(); //Nicholas

 instance1.sayAge(); //29

 

 var instance2 = new SubType("Greg", 27);

 alert(instance2.colors); //red,blue,green

 instance2.sayName(); //Greg

 instance2.sayAge(); //27

这种继承方式有效规避了单纯使用原型链或借用构造函数时存在的缺陷,并融合了二者的优势。

原型式继承:无需构造函数的浅复制

2. 原型式继承

该模式允许在不预先定义构造函数的情况下完成继承,其核心原理是对指定对象执行浅层复制。复制生成的副本对象还可以在此基础上进行进一步的修改和扩展。


function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var antherPerson = object(person);

 antherPerson.name = "Greg";

 antherPerson.friends.push("Rob");

 

 var antherPerson = object(person);

 antherPerson.name = "Linda";

 antherPerson.friends.push("Barbie");

 

 alert(person.friends); //Shelby,Court,Van,Rob,Barbie

寄生式继承:对象增强与效率优化

3. 寄生式继承

寄生式继承与原型式继承原理相近,同样基于特定对象或信息创建新对象,随后对该对象进行增强处理并返回。针对组合继承模式中因多次调用超类型构造函数而导致的效率低下问题,可将此模式与组合继承结合使用以优化性能。


function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 function createAnother(original) {

  var clone = object(original);

  clone.sayHi = function() {

   alert("Hi");

  };

  return clone;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var anotherPerson = createAnother(person);

 anotherPerson.sayHi();

寄生组合式继承:最优的引用类型继承方案

4. 寄生组合式继承

该模式集寄生式继承与组合继承的优点于一身,是目前实现基本类型继承最高效的方式。


//继承原型

 function extend(subType, superType) {

  function F(){};

  F.prototype = superType.prototype;

 

  var prototype = new F;

  prototype.constructor = subType;

  subType.prototype = prototype;

 }

 

 //超类方法

 function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  return this.name;

 }

 

 //子类方法

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承超类的原型

 extend(SubType, SuperType);

 

 //子类方法

 SubType.prototype.sayAge = function() {

  return this.age;

 }

 

 var instance1 = new SubType("Shelby");

 var instance2 = new SubType("Court", 28);

 

 instance1.colors.push('black');

 

 alert(instance1.colors); //red,blue,green,black

 alert(instance2.colors); //red,blue,green

 

 alert(instance1 instanceof SubType); //true

 alert(instance1 instanceof SuperType); //true

其高效性主要体现在仅需调用一次 SuperType 构造函数,从而避免了在 SubType.prototype 上创建不必要的多余属性。同时,原型链得以保持完整,因此 instanceof 和 isPrototypeOf() 方法仍能正常使用。开发人员普遍认可寄生组合式继承为引用类型最理想的继承范式。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章