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 版本]
Mar 20 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
DIY实用性框形天线
2021/03/02 无线电
提问的智慧(2)
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python导入txt数据到mysql的方法
2015/04/08 Python
Python functools模块学习总结
2015/05/09 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python和go语言的区别是什么
2020/07/20 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
公司活动方案范文
2014/03/06 职场文书
中学生运动会口号
2014/06/07 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
环保建议书作文300字
2015/09/14 职场文书