再论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解决innerText浏览器兼容问题思路代码
May 17 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
基于mysql的论坛(2)
2006/10/09 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
进一步探究Python中的正则表达式
2015/04/28 Python
Python制作数据导入导出工具
2015/07/31 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python发送邮件脚本
2018/05/22 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python3爬虫全国地址信息
2019/01/05 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
公司活动总结范文
2014/07/01 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android