JavaScript 继承机制详解:五种实现方式与优缺点对比

作者:纸飞机

时间:2026-10-29

浏览:571

本文系统梳理了 JavaScript 中五种主要的继承实现方式,包括构造继承、原型继承、实例继承、拷贝继承及混合继承。详细分析了各模式在方法共享、静态方法处理、多重继承支持及 instanceof 验证等方面的特性与局限,旨在帮助开发者根据实际需求选择最合适的继承策略。

文章目录

JavaScript 继承机制概述

本文通过具体实例深入解析 JavaScript 编程中的继承机制,供读者参考学习。

内容基于《Javascript 王者归来》一书的整理总结,详细章节可参考第 21 章第 537 页。

在 JavaScript 中,实现继承通常需满足以下三个核心层面的含义:

1)子类实例能够共享父类定义的方法; 2)子类具备覆盖父类方法或扩展新方法的权限; 3)子类和父类均被视为子类实例的类型。

五种主要继承实现方式

一、构造继承法

该方式通过在子类中调用父类的构造函数来维护继承关系。其优势在于支持多重继承,但局限在于仅能继承父类的共有方法,无法继承静态方法,且无法使用 instanceof 操作符来验证实例关系。


function a(){
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  a.apply(this,arguments);
}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
var oB=new b();
alert(oB instanceof a);// false
oB.say();       // happy new year
oB.fuck();       // 读不到

二、原型继承法(经典继承法)

此方法通过复制已存在的原型对象来实现行为复用,使对象实例能够共享原型对象的属性。它支持多重继承和静态方法的继承,并允许使用 instanceof 进行实例验证。


function a(){
 this.say=function(){
 alert("happy new year!");
 }
}
function b(){}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
a.prototype.z=123;
b.prototype=new a();
var oB=new b();
alert(oB instanceof a); // true
alert(oB.z);      // 123
oB.say();        // happy new year
oB.fuck();       // %^&%^&%&^%&

三、实例继承法(寄生构造函数模式)

由于构造法无法继承静态方法,而原型继承对某些核心对象的不可枚举方法支持不完善,实例继承法应运而生。它通过在类型内部构造对象并返回的方式实现继承,因此 instanceof 验证结果为 false,且不支持多重继承。


function a(){
 var oA=new Array();
 oA.say=function(){
   alert("hello A!");
 }
 return oA;
}
var obj=new a();
alert(obj instanceof a); // false
obj.say();

四、拷贝继承法

该方法通过拷贝基类对象的所有可枚举属性和方法来模拟继承过程。它可以模拟多继承并继承父类的静态方法,但对于不可枚举的属性则无法继承。


function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  this.extends=function(obj){
    for(each in obj){
      this[each]=obj[each];
    }
  }
}
var oB=new b();
oB.extends(new a());
alert(oB instanceof a); // false
alert(oB.num);     // 123
oB.say();        // happy new year

五、混合继承法

顾名思义,混合继承法综合了上述几种继承方式的优点以弥补不足,使继承机制更加完善。常见的组合形式为“构造+原型继承”,即伪经典继承模式。


function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  a.apply(this);
}
b.prototype=new a();
b.prototype.z=123;
var oB=new b();
alert(oB instanceof a); // true
alert(oB.num);     // 123
oB.say();        // happy new year

各模式优缺点总结

六、各种继承法的优缺点

JavaScript 继承机制概述

希望本文的总结与分析能对大家的 JavaScript 程序设计工作提供有益帮助。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章