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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
防止文件缓存的js代码
Jan 10 Javascript
JavaScript变量声明详解
Nov 27 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
Jquery Datatables的使用详解
Jan 30 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php分页代码学习示例分享
2014/02/20 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
vue页面切换过渡transition效果
2018/10/08 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python匿名函数用法实例分析
2019/08/03 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
高中生自我评价个人范文
2013/11/09 职场文书
学生自我鉴定模板
2013/12/30 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
索桥的故事教学反思
2014/02/06 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技