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在一段文字中的光标处插入其他文字
Aug 26 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
详解a++和++a的区别
Aug 30 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 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+MSSQL分页的例子
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
DOM 基本方法
2009/07/18 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
pytest中文文档之编写断言
2019/09/12 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
导游个人求职信
2014/04/25 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
政审证明材料
2015/06/19 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
redis protocol通信协议及使用详解
2022/07/15 Redis