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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
JS实现页面打印功能
Mar 16 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Javascript如何实现双指控制图片功能
Feb 25 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 图片上传代码
2011/09/13 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
使用正则替换变量
2007/05/05 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
基于iScroll实现内容滚动效果
2018/03/21 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python实现12306火车票查询器
2017/04/20 Python
20个常用Python运维库和模块
2018/02/12 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
使用python3实现操作串口详解
2019/01/01 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
使用索引有什么好处
2016/07/27 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
《最后的姿势》教学反思
2014/02/27 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
爱的承诺书
2015/01/20 职场文书
任命书标准格式
2015/03/02 职场文书