实现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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
vue实现登录功能
2020/12/31 Vue.js
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
《灯光》教学反思
2014/02/08 职场文书
电台实习生求职信
2014/02/25 职场文书
2015年保送生自荐信
2015/03/24 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL