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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
React Router基础使用
Jan 17 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vue如何在自定义组件中使用v-model
May 14 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
微信小程序实现的五星评价功能示例
Apr 25 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
给多个地址发邮件的类
2006/10/09 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Django在Model保存前记录日志实例
2020/05/14 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技