实现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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
vue和小程序项目中使用iconfont的方法
May 19 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 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类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python中static相关知识小结
2018/01/02 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
家属联谊会致辞
2015/07/31 职场文书
赞美教师的句子
2019/09/02 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers