再论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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
jquery图片切换插件
Mar 16 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
微信小程序实现多行文字滚动
Nov 18 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python作用域用法实例详解
2016/03/15 Python
机器学习10大经典算法详解
2017/12/07 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python实现吃苹果小游戏
2020/03/21 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
通信生自我鉴定
2014/01/18 职场文书
身边的榜样活动方案
2014/08/20 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
党员个人承诺书
2015/04/27 职场文书
交通事故被告代理词
2015/05/23 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js