实现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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Vue动态面包屑功能的实现方法
Jul 01 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 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Python版微信红包分配算法
2015/05/04 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python for i in range ()用法详解
2020/09/18 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
大学运动会通讯稿
2014/01/28 职场文书
企业党员公开承诺书
2014/03/26 职场文书
供用电专业求职信
2014/07/07 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
教师网络培训心得体会
2016/01/09 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js