实现JavaScript中继承的三种方式


Posted in Javascript onOctober 16, 2009

一、原型链继承

在原型链继承方面,JavaScript与java、c#等语言类似,仅允许单父类继承。prototype继承的基本方式如下:

function Parent(){} 
function Child(){} 
Child.prototype = new Parent();

通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性、方法等。

构造通过原型链链接了父级对象,是否就意味着完成了对象的继承了呢?答案是否定的。如:

function Parent(){} 
function Child(){} 
Child.prototype = new Parent(); 
var child = new Child(); 
alert(child.constructor);//function Parent(){} 
alert(child instanceof Child);//true

尽管child依然可以作为Child的实例使用,但此时已经丢失了实例child原有的对象构造信息。弥补该缺陷的方法如下:

function Parent(){} 
function Child(){} 
Child.prototype = new Parent(); 
Child.prototype.constructor = Child; 
var child = new Child(); 
alert(child.constructor);//function Parent(){} 
alert(child instanceof Child);//true

如上代码片段“Child.prototype.constructor = Child”所示,通过显示地指定对象构造Child的原型,强制所有的Child对象实例的构造都为Child。
二、使用apply、call方法

由于JavaScript内置的Function对象的apply、call方法改变对象构造中“this”的上下文环境,使特定的对象实例具有对象构造中所定义的属性、方法。

使用apply、call继承,在实际开发中操作HTML页面上的DOM对象时尤为常用。如:

<div id="extend">apply,call继承</div> 

<script language="javascript"> 

function ext() 

{ 


 this.onclick=function(){alert(this.innerHTML)} 

} 

ext.apply(document.getElementById("extend")); 

ext.call(document.getElementById("extend")); 

</script>

通过apply或call定义的ext方法,使ext方法内部的this上下文表示为DOM对象“<div id="extend">apply,call继承</div>”。

值得注意的是,当使用apply、call时,会直接执行对象构造所定义的代码段,如:

<script language="javascript"> 

function testExec() 

{ 


 alert("执行!"); 

} 

testExec.call(null);//弹出execute对话框 

testExec.apply(null);//弹出execute对话框 

</script>

三、对象实例间的继承

JavaScript对象的多态性,允许实例动态地添加属性、方法。该特性造就了JavaScript中的另一种继承手法——对象实例间的继承。如:

var Person = {name:"nathena",age:"26"}; 

var nathena = {sex:"male"}; 

(function inlineExtends(so,po) 

{ 


for (var i in po) 


{ 



if (so[i])//如果so也具有这个成员 




continue; 



so[i] = po[i]; 


} 

})(nathena,Person); 

alert(nathena.name);//返回nathana

如以上代码所示,在对象的实例间继承中,父对象Persong定义了“人”所具有的共同属性name、age,子对象nathena定义了自己的私有属性“sex”。函数inlineExtends的功能是,为子对象nathena复制父对象Person中定义的“人”所具有的共同属性。

其中特别需要注意的语句是“if (so[i])”,此句确保了子对象原有的成员不被父对象中同名的成员所覆盖,而违背面向对象中父子对象之间继承的原则——子对象可以覆盖、重载父对象的属性或方法,父对象仅能对子对象隐藏自己的属性或方法。

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
显示js对象所有属性和方法的函数
Oct 16 #Javascript
半角全角相互转换的js函数
Oct 16 #Javascript
JavaScript 三种创建对象的方法
Oct 16 #Javascript
JQuery困惑—包装集 DOM节点
Oct 16 #Javascript
JavaScript 对象成员的可见性说明
Oct 16 #Javascript
Javascript 圆角div的实现代码
Oct 15 #Javascript
IE Firefox 使用自定义标签的区别
Oct 15 #Javascript
You might like
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python时间日期操作方法实例小结
2020/02/06 Python
python yield和Generator函数用法详解
2020/02/10 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python中的插入排序的简单用法
2021/01/19 Python
电子商务专业实习生自我鉴定
2013/09/24 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
关于工作经历的证明书
2014/10/11 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书