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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
浅析js封装和作用域
2013/07/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
详解Python中with语句的用法
2015/04/15 Python
浅析Python中的多条件排序实现
2016/06/07 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python的flask框架难学吗
2020/07/31 Python
python3访问字典里的值实例方法
2020/11/18 Python
特步官方商城:Xtep
2017/03/21 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
上海世博会口号
2014/06/19 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android