再论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中的私有/静态属性介绍
Jul 26 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
初识Javascript小结
Jul 16 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
Node 模块原理与用法详解
May 13 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
如何开发一个渐进式Web应用程序PWA
May 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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python切片知识解析
2016/03/06 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python中qutip用法示例详解
2020/10/02 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
公司财务总监岗位职责
2013/12/14 职场文书
促销活动总结模板
2014/07/01 职场文书
单位工作证明范文
2014/09/14 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android