实现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中的函数
Jan 22 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
js实现坦克大战游戏
Feb 24 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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生成静态HTML文档的原理
2012/10/29 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python内置模块collections知识点总结
2019/12/19 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
初任培训自我鉴定
2013/10/07 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
《青山不老》教学反思
2016/02/22 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang