一个JavaScript继承的实现

 更新时间:2006年10月24日 00:00:00   作者:  
Author:尹伟铭

Blog:http://my.donews.com/yinwm/

如我前面的文章说的,对于JavaScript,一个类,就是一个function,他的类方法(也就是static的)都是作为这个function的一部分,而实例方法,都是在prototype上面的。
function ClassA() {
}

ClassA.staticMethod = function () {
}

ClassA.prototype.instanceMethod = function () {
}

在我这个实现当中,一个类的继承是拷贝父类的所有类方法,这样子类就有了父类的静态方法。
然后让子类的prototype.prototype指向父类的prototype.
然后可以根据自己的需要,重写一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}

对于子类,使用一个prototype的链,来实现方法的实例方法的继承。之所以选择这种实现方法,是因为子类是要重写其中的某些方法的。而prototype又是一个reference,所以直接的写作ClassB.prototype = ClassA.prototype,会在重写ClassB的实例方法的同时,破坏ClassA的实例方法。而修改后的方法则会屏蔽父类的。

寻找方法的顺序是,instanceA.prototype.method -> ClassA.prototype.
此时对于类方法的继承,已经实现,现在需要实现在子类中,调用父类的方法。
对于Java,这样的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,为了实现此类功能,所以必须保留一个parent的reference,指向ParentClass.prototype.
ClassB.prototype.parent = ClassA.prototype.
那么在instanceB里面调用this.parent.method.call(this);就可以使用父类的方法了。使用call调用,是为了把自己的数据传到父类。更漂亮的解决方法,我还没有想到。

所以完成的代码是
function ClassA() {
}

ClassA.prototype.method1 = function () {
}

ClassA.staticMethod = function () {
}

function ClassB(){
}

ClassB.staticMethod = ClassA.staticMethod;

ClassB.prototype.prototype = ClassB.prototype.parent = ClassA.prototype;

这个我抽象出来一个extend方法,

var LCore = function () {
}

LCore.extend = function (destination, source) {
// copy all functons
for (var prop in source) {
if (prop == “prototype”) {
continue;
}

destination.prototype[prop] = source[prop];
}

// make a reference for parent and reference prototype
destination.prototype.prototype = destination.prototype.parent = source.prototype;

return destination;

相关文章

  • 让div层随鼠标移动的实现代码 ie ff

    让div层随鼠标移动的实现代码 ie ff

    随鼠标移动的div层使用ie ff ,大家可以注意下兼容性的问题。
    2009-12-12
  • IP地址输入框

    IP地址输入框

    IP地址输入框...
    2006-08-08
  • JS document文档的简单操作完整示例

    JS document文档的简单操作完整示例

    这篇文章主要介绍了JS document文档的简单操作,结合完整实例形式详细分析了JavaScript document文档元素添加、删除、获取、创建等相关操作技巧与使用注意事项,需要的朋友可以参考下
    2020-01-01
  • JS异步处理的进化史深入讲解

    JS异步处理的进化史深入讲解

    这篇文章主要给大家介绍了关于JS异步处理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 微信小程序实现实时圆形进度条的方法示例

    微信小程序实现实时圆形进度条的方法示例

    这篇文章主要给大家介绍了利用微信小程序实现实时圆形进度条的方法,文中给出了详细的示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-02-02
  • 详解webpack自动生成html页面

    详解webpack自动生成html页面

    本篇文章主要介绍了详解webpack自动生成页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • layui table 表格上添加日期控件的两种方法

    layui table 表格上添加日期控件的两种方法

    今天小编就为大家分享一篇layui table 表格上添加日期控件的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中boolean类型之三种情景实例代码

    JavaScript中boolean类型之三种情景实例代码

    下面小编就为大家带来一篇JavaScript中boolean类型之三种情景实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS返回只包含数字类型的数组实例分析

    JS返回只包含数字类型的数组实例分析

    这篇文章主要介绍了JS返回只包含数字类型的数组实现方法,结合实例形式分析了循环遍历数组及正则匹配两种实现技巧,需要的朋友可以参考下
    2016-12-12
  • 前端大文件分片MinIO上传的详细代码

    前端大文件分片MinIO上传的详细代码

    这篇文章主要给大家介绍了关于前端大文件分片MinIO上传的详细代码,Minio支持分片上传大文件,这个功能可以让用户将大文件划分成小块,然后在多个并行的HTTP请求中上传这些小块,从而提高上传速度和稳定性,需要的朋友可以参考下
    2024-09-09

最新评论