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 相关文章推荐
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
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
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php遍历CSV类实例
2015/04/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JS之小练习代码
2008/10/12 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
启动一个线程是用run()还是start()
2016/12/25 面试题
水果超市创业计划书
2014/01/27 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
导师工作推荐信范文
2014/05/17 职场文书
学校食品安全实施方案
2014/06/14 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Python实现视频自动打码的示例代码
2022/04/08 Python