再论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 解析多维的Json数据格式
Nov 02 Javascript
详细讲解JS节点知识
Jan 31 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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 GD绘制24小时柱状图
2008/06/28 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python3处理文件中每个词的方法
2015/05/22 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
详解python:time模块用法
2019/03/25 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python3内置模块random随机方法小结
2019/07/13 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Python 使用office365邮箱的示例
2020/10/29 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
中秋节礼品促销方案
2014/02/02 职场文书
工程造价专业求职信
2014/07/17 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
质量保证书怎么写
2015/02/27 职场文书
小学家长意见怎么写
2015/06/03 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python