再论Javascript的类继承


Posted in Javascript onMarch 05, 2011

无参数类继承的问题

先看一段示例代码,实现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

这段代码的主要问题是:

* 需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。
* 更改了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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
jquery validate demo 基础
Oct 29 Javascript
js性能优化技巧
Nov 29 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
You might like
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
axios基本入门用法教程
2017/03/25 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
绿化工程实施方案
2014/03/17 职场文书
太太口服液广告词
2014/03/20 职场文书
自主招生学校推荐信
2014/09/26 职场文书
人身意外保险授权委托书
2014/10/01 职场文书