JavaScript 继承的五种实现方式详解

作者:闭包旅人

时间:2026-10-23

浏览:163

本文详细解析 JavaScript 中实现继承的五种常用方法,包括对象冒充、call 方法、apply 方法、原型链以及混合模式。通过具体代码示例,阐述如何利用构造函数赋值、函数调用上下文绑定及原型对象传递来实现类间的属性与方法继承,并指出各方法的注意事项与优先级规则。

文章目录

下面介绍几种常用的 JavaScript 继承实现方式:


1 .对象冒充

对象冒充实现继承

原理:构造函数利用 this 关键字为所有属性和方法赋值。由于构造函数本质上只是函数,因此可以将 ClassA 的构造函数作为 ClassB 的方法进行调用,从而让 ClassB 获得 ClassA 构造函数中定义的属性和方法。示例如下:


代码如下:

function classA(name)
{ 
this.name=name;
this.showName=function(){alert(this.name);}
} 
function classB(name)
{ 
this.newMethod = classA;
this.newMethod(name);
} 
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby 说明classB 继承了classA的方法.

对象冒充技术还可以实现多重继承,例如:


代码如下:

function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
this.newMethod=classY;
this.newMethod():
delete this.newMethod;
} 

但是如果classX和classY有相同的属性或者方法,classY具有高优先级.


2.call()方法

使用 call 方法实现继承

call 方法是一种与经典对象冒充法相近的技术,它的第一个参数用作 this 的对象,其他参数都直接传递给函数自身。


代码如下:

function sayName(perfix)
{ 
alert(perfix+this.name);
} 
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name)
{ 
this.name=name;
this.showName=function(){alert(this.name);};
} 
function classB(name)
{ 
classA.call(this,name);
} 
objB = new classB("bing");
objB.showName();////说明classB继承classA的showName方法

3.apply()方法

使用 apply 方法实现继承

aplly() 方法有两个参数,一个用作 this 对象,另一个是传递给函数的参数数组。


代码如下:

function sayName(perfix)
{ 
alert(perfix+this.name);
} 
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") );

4. 原型链

原型链继承

prototype 对象的任何属性和方法都会被传递给对应类的所有实例,原型链就是通过这种方式来实现继承的。


代码如下:

function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero 说明b继承了a的方法

这里需要注意 调用classA的构造函数时,没有给它传递参数,这是原型链的标准做法,确保函数的构造函数没有任何参数.


并且 子类的所有属性和方法,必须出现在prototype属性被赋值后,应为在它之前赋的值会被删除.因为对象的prototype属性被替换成了新对象,添加了新方法的原始对象将被销毁.



5 混和方式

混合继承模式

就是用冒充方式 定义构造函数属性,用原型法定义对象方法.


代码如下:

function classA(name)
{ 
this.name=name;
} 
classA.prototype.showName=function(){alert(this.name)}
function classB(name)
{ 
classA.call(this,name);
} 
classB.prototype = new classA();
classB.prototype.showName1=function(){alert(this.name+"*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();

在classB的构造函数中通过调用call方法 继承classA中的name属性,用原型链来继承classA的showName方法.

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章