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 相关文章推荐
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php实现简单洗牌算法
2013/06/18 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
python的变量与赋值详细分析
2017/11/08 Python
python把转列表为集合的方法
2019/06/28 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
分公司负责人任命书
2014/06/04 职场文书
毕业生找工作求职信
2014/08/05 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
房屋产权证明书
2015/06/19 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android