实现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中的for如何实现foreach中的遍历
May 31 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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 加密与解密的斗争
2009/04/17 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
js对象的比较
2011/02/26 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python迭代器常见用法实例分析
2019/11/22 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
详解Python 函数参数的拆解
2020/09/02 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
西门豹教学反思
2014/02/04 职场文书
交通志愿者活动总结
2014/06/27 职场文书
家属答谢词
2015/01/05 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js