再论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 相关文章推荐
XP折叠菜单&仿QQ2006菜单
Dec 16 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
JavaScript实现前端倒计时效果
Feb 09 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下过滤HTML代码的函数
2007/12/10 PHP
php中require和require_once的区别说明
2014/02/27 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
基于python的Paxos算法实现
2019/07/03 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python sorted排序方法如何实现
2020/03/31 Python
PyTorch中的C++扩展实现
2020/04/02 Python
学习python需要有编程基础吗
2020/06/02 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
文秘档案管理岗位职责
2014/03/06 职场文书
应届生自荐书
2014/06/23 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书