实现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 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 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
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
python issubclass 和 isinstance函数
2019/07/25 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美术指导助理求职信
2014/04/20 职场文书
趣味运动会广播稿
2014/09/13 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS