再论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 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js获取json元素数量的方法
Jan 27 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
pygame播放音乐的方法
2015/05/19 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
jupyter notebook 重装教程
2020/04/16 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
外国人聘用意向书
2014/04/01 职场文书
2014年服务员工作总结
2014/11/18 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
给老婆的道歉信
2015/01/20 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python