再论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 获取表单file全路径
Dec 31 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
css3中transition属性详解
2014/09/02 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
水电站项目建议书
2014/05/12 职场文书
无传销社区工作方案
2014/05/13 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
党员自我评价2015
2015/03/03 职场文书
停发工资证明范本
2015/06/12 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android