Javascript无参数和有参数类继承问题解决方法

 更新时间:2015年03月02日 10:57:39   投稿:junjie  
这篇文章主要介绍了Javascript无参数和有参数类继承问题解决方法,本文讲解了无参数类继承的问题和有参类继承的问题,并给出了解决方案,需要的朋友可以参考下

说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。

无参数类继承的问题

先看一段示例代码,实现B继承于A:

复制代码 代码如下:

function A() {
}
A.prototype.a1 = function() { };

function B() {
}
B.prototype = new A();
B.prototype.b1 = function() { };

var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false


这段代码的主要问题是:

1.需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。

2.更改了B的prototype,导致b.constructor不是B而是A。

有参类继承的问题

假设A和B都有两个字符串参数s1和s2,A中计算了两段字符串的总长度,B直接以s1、s2为参数调用A:

复制代码 代码如下:

function A(s1, s2) {
  this.totalLength = s1.length + s2.length;
}
A.prototype.a1 = function() {  
};

function B(s1, s2) {
}
B.prototype = new A();
B.prototype.b1 = function() {
};

new B("ab", "123");


可以看到,这段代码中根本没有办法把s1和s2传到A,而又因为实例化A作为B的原型时没有参数,所以出现了异常:
复制代码 代码如下:

s1 is undefined

解决方案

s1和s2的作用域只在B内,要把它们传到A,就只能在B中操作,借助函数的apply方法就可以实现之:

复制代码 代码如下:

function B(s1, s2) {
  A.apply(this, arguments);
  alert(this.totalLength);
}

接下来的问题就是如何把A的方法添加到B的原型中去。这也不难,只要遍历A.prototype,把方法复制到B.prototype即可。要注意的是,对于同名的方法,自然是子类优先(重载),因而不能覆盖:
复制代码 代码如下:

for (var m in A.prototype) {
  if (!B.prototype[m]) {  // 父类不能覆盖子类的方法
    B.prototype[m] = A.prototype[m];
  }
}

后记

考虑到C#、Java等高级语言都抛弃了多继承,因此,本文所讨论的也只是单继承的情况。而本文所述的继承方法,也会写成jRaiser的一个扩展,迟些发布。

相关文章

  • JS数组合并与对象合并的方法汇总

    JS数组合并与对象合并的方法汇总

    这篇文章主要给大家介绍了关于JS数组合并与对象合并的方法,本文将介绍常见的JS对象合并和数组合并方法,帮助读者更好地理解和运用这些方法,需要的朋友可以参考下
    2024-12-12
  • JS百度地图搜索悬浮窗功能

    JS百度地图搜索悬浮窗功能

    这篇文章主要为大家详细介绍了JS百度地图搜索悬浮窗功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • OpenLayers实现点要素图层的聚合显示的方法

    OpenLayers实现点要素图层的聚合显示的方法

    在很多情况下,点要素图层中的要素数量可能会成百上千,如果一个点要素图层中的点数量很多,我们就会采取图层聚合的方式对其进行处理,本文就来介绍一下,感兴趣的可以了解一下
    2021-09-09
  • 详解JSON Web Token 入门教程

    详解JSON Web Token 入门教程

    这篇文章主要介绍了详解JSON Web Token 入门教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解JavaScript类型判断的四种方法

    详解JavaScript类型判断的四种方法

    这篇文章主要介绍了JavaScript类型判断的四种方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-10-10
  • 获取offsetTop和offsetLeft值的js代码(兼容)

    获取offsetTop和offsetLeft值的js代码(兼容)

    offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的,为了实现值的准确获取,本文采用js代码实现下,有需求的朋友可以参考下哈
    2013-04-04
  • 深入探究JavaScript中WeakMap的原理与用法

    深入探究JavaScript中WeakMap的原理与用法

    这篇文章主要对JavaScript中的WeakMap进行深入探究,包括它的原理、用法和注意事项等,文中的示例代码简洁易懂,需要的小伙伴可以参考一下
    2023-05-05
  • javascript模拟命名空间

    javascript模拟命名空间

    JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题,希望大家能够喜欢。
    2015-04-04
  • javascript中内置对象Math的介绍及用法案例

    javascript中内置对象Math的介绍及用法案例

    Math对象是一个内置对象,具有数学常数和函数的属性和方法,不是一个函数对象,下面这篇文章主要给大家介绍了关于javascript中内置对象Math的介绍及用法案例的相关资料,需要的朋友可以参考下
    2022-03-03
  • jQuery $.data()方法使用注意细节

    jQuery $.data()方法使用注意细节

    前段时间同事在群里对jQuery里的.data()方法接下来介绍jQuery $.data()方法使用注意细节,需要了解的朋友可以参考下
    2012-12-12

最新评论