再论Javascript的类继承


Posted in Javascript onMarch 05, 2011

无参数类继承的问题

先看一段示例代码,实现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

这段代码的主要问题是:

* 需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。
* 更改了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 相关文章推荐
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jquery实现保存已选用户
Jul 21 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
20个常用Python运维库和模块
2018/02/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python实现端口检测的方法
2018/07/24 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python wsgiref源码解析
2021/02/06 Python
酒店副总岗位职责
2013/12/24 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
服务员岗位职责
2014/01/29 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
军训 自我鉴定
2014/02/03 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
维稳工作情况汇报
2014/10/27 职场文书
情人节活动总结范文
2015/02/05 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android