JavaScript实现类继承的extend函数示例
作者:异步漫步时间:2026-10-26 00:39:08浏览:521
本文通过一个具体的JavaScript代码示例,展示了如何使用原型链和中间临时对象来实现类继承。重点解析了extend函数的实现原理,包括如何避免父子类原型共享导致的属性污染,以及如何通过apply调用父类构造函数和重写方法来实现多态。
JavaScript类继承实现与原型链详解
代码如下:
利用原型继承机制,在子类与父类之间引入一个临时对象作为中间层。该临时对象的原型指向父类的原型,从而切断子类与父类原型的直接关联。
这种设计旨在防止子类和父类的原型属性共同指向同一个对象实例,避免修改子类原型时意外影响其他子类或父类。
通过这种方式,确保每个子类的原型修改是独立的,不会影响其他子类和父类的行为。
定义一个通用的继承函数 extend,接收子类和父类作为参数。
创建一个空的构造函数 F。
将 F 的原型指向父类的原型,建立临时对象与父类原型的连接。
将子类的原型设置为 F 的新实例,使子类继承临时对象的原型链。
修正子类的 constructor 属性指向子类自身,保持构造器引用的正确性。
为子类添加一个 base 属性,指向父类的原型,便于后续调用父类方法。
}
定义父类构造函数 Parent,接收 name 参数。
{
在父类实例上初始化属性 aa 为 123。
定义 getName 方法,通过闭包返回 name 参数,模拟私有成员访问。
定义 setName 方法,通过闭包修改 name 的值。
}
在父类原型上定义 print 方法,弹出提示框显示“print!”。
在父类原型上定义 hello 方法。
{
该方法弹出提示框,显示通过 getName 获取的 name 值及字符串“Parent”。
};
定义子类构造函数 Child,接收 name 和 age 参数。
{
使用 Parent.apply(this, arguments) 调用父类构造函数,继承父类定义的实例属性。
在子类实例上初始化属性 age 为传入的 age 值。
}
调用 extend(Child, Parent) 执行继承逻辑,使子类获得父类的原型方法。
在子类原型上重写 hello 方法,实现多态。
{
该方法弹出提示框,显示通过 getName 获取的 name 值及字符串“Child”。
通过 Child.base.hello.apply(this, arguments) 调用父类同名的 hello 方法,实现方法扩展。
};
定义子类特有的方法 doSomething。
Child.prototype.doSomething = function(){ alert(this.age + "Child doSomething"); };
实例化一个 Child 对象 p1,传入参数“xhan”和 22。
实例化另一个 Child 对象 p2,传入参数“xxx”和 33。
调用 p1 的 hello 方法,验证子类重写后的行为。
调用 p2 的 hello 方法,验证另一个实例的行为。
调用 p1 的 doSomething 方法,执行子类特有逻辑。
调用 p1 的 print 方法,验证从父类继承的方法是否可用。
使用 alert 输出 p1 instanceof Child 的结果,预期为 true。
使用 alert 输出 p1 instanceof Parent 的结果,预期为 true,验证原型链继承关系。作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
