再论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进行拖拽
Jul 20 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
深入理解Node module模块
Mar 26 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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新手上路(七)
2006/10/09 PHP
php 无限极分类
2008/03/27 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
JS实现简易计算器
2020/02/14 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Python使用functools实现注解同步方法
2018/02/06 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Django框架模板介绍
2019/01/15 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python里运用私有属性和方法总结
2019/07/08 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
玩具公司的创业计划书
2013/12/31 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
监理中标通知书
2015/04/16 职场文书
学校证明范文
2015/06/24 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP