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 相关文章推荐
Jquery中"$(document).ready(function(){ })"函数的使用详解
Dec 30 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
小程序实现选择题选择效果
2018/11/04 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
在Python下尝试多线程编程
2015/04/28 Python
python 实现登录网页的操作方法
2018/05/11 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python递归全排列实现方法
2018/08/18 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python调用c++传递数组的实例
2019/02/13 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
极简的HTML5模版
2015/07/09 HTML / CSS
啦啦队口号大全
2014/06/16 职场文书
园林系毕业生求职信
2014/06/23 职场文书
代领报检证委托书范本
2014/10/11 职场文书
后进生评语大全
2015/01/04 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android