实现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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python实现随机梯度下降法
2020/03/24 Python
python按比例随机切分数据的实现
2019/07/11 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python中有几个关键字
2020/06/04 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
金融管理专业毕业生求职信
2014/03/12 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
合作协议书模板
2014/10/10 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
新员工入职感想
2015/08/07 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书