再论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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
js星星评分效果
Jul 24 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
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
关于svn冲突的解决方法
2013/06/21 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python和php哪个容易学
2020/06/19 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python 串口通信的实现
2020/09/29 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
职工运动会感言
2014/02/07 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
教师节祝酒词
2015/08/11 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书