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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python实现简单登陆流程的方法
2018/04/22 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
详解Python装饰器
2019/03/25 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python制作朋友圈九宫格图片
2019/11/03 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
感恩教育月活动总结
2014/07/07 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
教学质量月活动总结
2015/05/11 职场文书
2016寒假假期总结
2015/10/10 职场文书
学前班教学反思
2016/02/24 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS