JavaScript 构造函数继承的两种实现方式:原型链与属性拷贝
作者:拾光时间:2026-10-28 20:59:57浏览:299
本文分析 JavaScript 中两种构造函数继承实现。第一种基于 YUI 库的原型链继承,通过空函数 F 连接父子原型,保持原型链完整。第二种为属性拷贝方式,将父类原型属性逐一复制到子类原型,效率较低且仅支持基本数据类型。文章通过代码示例对比了两种方法的优缺点及适用场景。
本文详细介绍 JavaScript 中封装可用的构造函数继承方法,旨在为开发者提供参考。
基于原型链的继承实现
首先展示相关代码实现。
这里采用 YUI 库中使用的经典继承模式。
具体代码如下:
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
基于属性拷贝的继承方式
此外,还存在另一种基于属性拷贝的继承方式。
与前述方法不同,由于已直接扩展了 Child 的原型,因此无需再重置 Child.prototype.constructor 属性,因为它不会被后续操作覆盖。
相比之下,该方法的执行效率略低,因为其执行的是对子对象原型的逐一拷贝操作,而非简单的原型链查询。
此方式仅适用于包含基本数据类型的对象。所有对象类型(包括函数和数组)均不可直接复制,仅支持引用传递。
属性拷贝的示例代码如下:
function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
var Shape = function(){}
var TwoDShape = function(){}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){
return this.name;
}
extend2(TwoDShape,Shape);
var t = new TwoDShape();
t.name
//-->"shape"
t.toString();
//-->"shape"
TwoDShape.prototype.name = 'TwoDShape';
t.name
//-->"2d shape"
t.toString();
//-->"2d shape"
TwoDShape.prototype.toString === Shape.prototype.toString
//-->true
TwoDShape.prototype.name === Shape.prototype.name
//-->false
希望上述关于 JavaScript 程序设计的分析能对读者有所帮助。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
