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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
微信小程序页面渲染实现方法
Nov 06 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封装的Twitter访问类实例
2015/07/18 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python处理csv数据的方法
2015/03/11 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python编写分类决策树的代码
2017/12/21 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python conda操作方法
2019/09/11 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
转让协议书范本
2014/04/15 职场文书
庆国庆活动总结
2014/08/28 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
学雷锋活动简报
2015/07/20 职场文书
法制工作总结2015
2015/07/23 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript