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 相关文章推荐
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
轮播的简单实现方法
2016/07/28 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
简述 Python 的类和对象
2020/08/21 Python
python 利用zmail库发送邮件
2020/09/11 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
初中语文教学反思
2014/02/02 职场文书
建议书范文
2015/02/05 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技