实现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实现跨域的方法汇总
Jun 25 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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实现SMTP邮件的发送实例
2018/09/27 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
Python的时间模块datetime详解
2017/04/17 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
django model object序列化实例
2020/03/13 Python
大一期末自我鉴定
2013/12/13 职场文书
无传销社区工作方案
2014/05/13 职场文书
法人代表证明书
2014/09/18 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
健康证明
2015/06/19 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
vue递归实现树形组件
2022/07/15 Vue.js