实现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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
解析原生JS getComputedStyle
May 25 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通过引用传递参数用法分析
2016/12/01 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python接口自动化测试的实现
2020/08/28 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
一组SQL面试题
2016/02/15 面试题
过滤器的用法
2013/10/08 面试题
公司拓展活动方案
2014/02/13 职场文书
党员公开承诺事项
2014/03/25 职场文书
校企合作协议书
2014/04/16 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
入党团支部推荐意见
2015/06/02 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
golang正则之命名分组方式
2021/04/25 Golang
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL