JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现


Posted in Javascript onAugust 14, 2012

继承

继承是面向对象语言的必备特征,即一个类能够重用另一个类的方法和属性。在JavaScript中继承方式的实现方式主要有以下五种:对象冒充、call()、apply()、原型链、混合方式。

下面分别介绍。

对象冒充

原理:构造函数使用this关键字给所有属性和方法赋值。因为构造函数只是一个函数,所以可以使ClassA的构造函数成为ClassB的方法,然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。

示例:

function ClassA(sColor){ 
this.color=sColor; 
this.sayColor=function(){ 
alert(this.color); 
} 
} function ClassB(sColor,sName){ 
this.newMethod=ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 
this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

调用:
var objb=new ClassB("blue","Test"); 
objb.sayColor();// 
blueobjb.sayName(); // Test

注意:这里要删除对ClassA的引用,否则在后面定义新的方法和属性会覆盖超类的相关属性和方法。用这种方式可以实现多重继承。

call()方法

由于对象冒充方法的流行,在ECMAScript的第三版对Function对象加入了两个新方法 call()和apply()方法来实现相似功能。

call()方法的第一个参数用作this的对象,其他参数都直接传递给函数自身。示例:

function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
} var obj=new Object(); 
obj.color="red"; 
//output The color is red, a very nice color indeed. 
sayColor.call(obj,"The color is ",", a very nice color indeed.");

 使用此方法来实现继承,只需要将前三行的赋值、调用、删除代码替换即可:
function ClassB(sColor,sName){ 
//this.newMethod=ClassA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.call(this,sColor); this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

apply()方法

apply()方法跟call()方法类似,不同的是第二个参数,在apply()方法中传递的是一个数组。

function sayColor(sPrefix,sSuffix){ 
alert(sPrefix+this.color+sSuffix); 
} var obj=new Object(); 
obj.color="red"; 
//output The color is red, a very nice color indeed. 
sayColor.apply(obj,new Array("The color is ",", a very nice color indeed."));

使用此方法来实现继承,只需要将前三行的赋值、调用、删除代码替换即可:
function ClassB(sColor,sName){ 
//this.newMethod=ClassA; 
//this.newMethod(sColor); 
//delete this.newMethod; 
ClassA.apply(this,new Array(sColor)); this.name=sName; 
this.sayName=function(){ 
alert(this.name); 
} 
}

跟call()有一点不同的是,如果超类中的参数顺序与子类中的参数顺序完全一致,第二个参数可以用arguments。

原型链

继承这种形式在ECMAScript中原本是用于原型链的。Prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能实现继承机制。

用原型链实现继承示例:

function ClassA(){ 
} ClassA.prototype.color="red"; 
ClassA.prototype.sayColor=function(){ 
alert(this.color); 
}; 
function ClassB(){ 
} 
ClassB.prototype=new ClassA();

 注意:调用ClassA的构造函数时,没有给它传递参数。这在原型链中是标准的做法,要确保构造函数没有任何参数。

混合方式

这种方式混合了对象冒充和原型链方式。示例:

function ClassA(sColor){ 
this.color=sColor; 
} 
ClassA.prototype.sayColor=function(){ 
alert(this.color); 
} function ClassB(sColor,sName){ 
ClassA.call(this,sColor); 
this.name=sName; 
} 
ClassB.prototype=new ClassA(); 
ClassB.prototype.sayName=function(){ 
alert(this.name); 
}

调用示例:
var objb=new ClassB("red","test"); 
objb.sayColor();// output red 
objb.sayName();// output test

作者:Artwl
Javascript 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
常用一些Javascript判断函数
Aug 14 #Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 #Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 #Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 #Javascript
You might like
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP编码转换
2012/11/05 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
javascript比较文档位置
2008/04/08 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
学年自我鉴定
2014/01/16 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
司仪主持词两篇
2014/03/22 职场文书
廉洁校园实施方案
2014/05/25 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android