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


Posted in Javascript onMarch 02, 2015

说到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的一个扩展,迟些发布。

Javascript 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
React中使用collections时key的重要性详解
Aug 07 Javascript
Vue 实现简易多行滚动"弹幕"效果
Jan 02 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 #Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 #Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 #Javascript
JavaScript日期类型的一些用法介绍
Mar 02 #Javascript
了解Javascript的模块化开发
Mar 02 #Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
js实现图片漂浮效果的方法
Mar 02 #Javascript
You might like
php下获取客户端ip地址的函数
2010/03/15 PHP
基于php split()函数的用法详解
2013/06/05 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python传递参数方式小结
2015/04/17 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
土木工程专业自荐信
2013/10/04 职场文书
鼋头渚导游词
2015/02/05 职场文书
初中语文教学反思范文
2016/03/03 职场文书