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 锁定弹出层实现代码
Feb 23 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
layDate日期控件使用方法详解
Nov 15 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP循环获取GET和POST值的代码
2008/04/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP代码优化的53个细节
2014/03/03 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python 如何调用远程接口
2020/09/11 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
班级寄语大全
2014/04/10 职场文书
品德评语大全
2014/05/05 职场文书
考试作弊检讨书
2014/10/21 职场文书
五好家庭申报材料
2014/12/20 职场文书
教师节座谈会主持词
2015/07/03 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
nginx之queue的具体使用
2022/06/28 Servers
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript