再论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 相关文章推荐
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
angular.js实现购物车功能
Oct 23 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
vue2 中二级路由高亮问题及配置方法
Jun 10 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
js常用代码段整理
2011/11/30 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
js 获取、清空input type="file"的值示例代码
2014/02/19 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python中的列表知识点汇总
2015/04/14 Python
python中set常用操作汇总
2016/06/30 Python
Python 变量的创建过程详解
2019/09/02 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
pyspark 随机森林的实现
2020/04/24 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
计算s=f(f(-1.4))的值
2014/05/06 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
2014年医生工作总结
2014/11/21 职场文书
校车安全管理责任书
2015/05/11 职场文书
保险公司增员口号
2015/12/25 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js