实现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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
Javascript实现关闭广告效果
Jan 29 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中使用PDF文档功能
2006/10/09 PHP
生成php程序的php代码
2008/04/07 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP curl使用实例
2015/07/02 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
js实现移动端轮播图
2020/12/21 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python自动化报告的输出用例详解
2018/05/30 Python
详解python里的命名规范
2018/07/16 Python
python3实现名片管理系统
2020/11/29 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
一套SQL笔试题
2016/08/14 面试题
旷课检讨书大全
2014/01/21 职场文书
旅游网创业计划书
2014/01/31 职场文书
五好党支部事迹材料
2014/02/06 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
信用卡催款律师函
2015/05/27 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
关于五一放假的通知
2015/08/18 职场文书