再论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 相关文章推荐
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
vue实现简单加法计算器
Oct 22 Javascript
微信小程序实现轮播图指示器
Jun 25 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
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php去除数组中重复数据
2014/11/18 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
基于jQuery实现可编辑的表格
2019/12/11 jQuery
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python 中 list 的各项操作技巧
2017/04/13 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
中间件分为哪几类
2012/03/14 面试题
期中考试反思800字
2014/05/01 职场文书
英文演讲稿
2014/05/15 职场文书
初中教师个人总结
2015/02/10 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android