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生成asp.net服务器控件的代码
Feb 04 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jquery自定义表格样式
Nov 23 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
Zerg建筑一览
2020/03/14 星际争霸
对PHP依赖注入的理解实例分析
2016/10/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Python模拟三级菜单效果
2017/09/11 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
通过自学python能找到工作吗
2020/06/21 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
《画杨桃》教学反思
2014/04/13 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
学校教师安全责任书
2014/07/23 职场文书
家长学校教学计划
2015/01/19 职场文书
离婚案件上诉状
2015/05/23 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers