实现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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
使用AOP改善javascript代码
May 01 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
显示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
星际中的相关伤害
2020/03/04 星际争霸
使用PHP函数scandir排除特定目录
2014/06/12 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
javascript自执行函数
2017/02/10 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
Python虚拟环境项目实例
2017/11/20 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python3多线程操作简单示例
2018/05/22 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
教师岗位职责范本
2013/12/29 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
勇敢的心观后感
2015/06/09 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL