再论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 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
JS中的BOM应用
Feb 02 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 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
PHP的FTP学习(三)
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
如何利用find命令查找文件
2015/02/07 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
同事吵架检讨书
2014/02/05 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
爱国影片观后感
2015/06/18 职场文书
老乡会致辞
2015/07/28 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
如何获取numpy array前N个最大值
2021/05/14 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Android Studio 计算器开发
2022/05/20 Java/Android