Javascript无参数和有参数类继承问题解决方法


Posted in Javascript onMarch 02, 2015

说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。

无参数类继承的问题

先看一段示例代码,实现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

这段代码的主要问题是:

1.需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。

2.更改了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 validator 插件增加日期比较方法
Feb 21 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
使用jQuery实现购物车
Oct 29 jQuery
JS实现超炫网页烟花动画效果的方法
Mar 02 #Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 #Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 #Javascript
JavaScript日期类型的一些用法介绍
Mar 02 #Javascript
了解Javascript的模块化开发
Mar 02 #Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
js实现图片漂浮效果的方法
Mar 02 #Javascript
You might like
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Python Mysql自动备份脚本
2008/07/14 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
pandas的qcut()方法详解
2019/07/06 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
如何基于线程池提升request模块效率
2020/04/18 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
担保书怎么写
2014/04/01 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
学期个人自我总结
2015/02/13 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
python实现股票历史数据可视化分析案例
2021/06/10 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL