javascript 面向对象继承


Posted in Javascript onNovember 26, 2009

在prototype框架中的类继承实现机制

//为Object类添加静态方法:extend 
Object.extend = function(destination, source) { 
for(property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
//通过Object类为每个对象添加方法extend 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}

Object.extend方法很容易理解,它是Object类的一个静态方法,用于将参数中source的所有属性都赋值到destination对象中,并返回destination的引用。下面解释一下Object.prototype.extend的实现,因为Object是所有对象的基类,所以这里是为所有的对象都添加一个extend方法,函数体中的语句如下:
Object.extend.apply(this,[this,object]);
这一句是将Object类的静态方法作为对象的方法运行,第一个参数this是指向对象实例自身;第二个参数是一个数组,包括两个元素:对象本身和传进来的对象参数object。函数功能是将参数对象object的所有属性和方法赋值给调用该方法的对象自身,并返回自身的引用。有了这个方法,下面看类继承的实现:
<script language="JavaScript" type="text/javascript"> 
<!-- 
//定义extend方法 
Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
} 
//定义class1 
function class1(){ 
//构造函数 
} 
//定义类class1的成员 
class1.prototype={ 
method:function(){ 
alert("class1"); 
}, 
method2:function(){ 
alert("method2"); 
} } 
//定义class2 
function class2(){ 
//构造函数 
} 
//让class2继承于class1并定义新成员 
class2.prototype=(new class1()).extend({ 
method:function(){ 
alert("class2"); 
} 
}); 
//创建两个实例 
var obj1=new class1(); 
var obj2=new class2(); 
//试验obj1和obj2的方法 
obj1.method(); 
obj2.method(); 
obj1.method2(); 
obj2.method2(); 
//--> 
</script>

从运行结果可以看出,继承被正确的实现了,而且派生类的额外成员也可以以列表的形式加以定义.
Javascript 相关文章推荐
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 #Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 #Javascript
Ext grid 添加右击菜单
Nov 26 #Javascript
JS 判断undefined的实现代码
Nov 26 #Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 #Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 #Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
newxtree.js代码
2007/03/13 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Python数据类型详解(一)字符串
2016/05/08 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
pytorch之添加BN的实现
2020/01/06 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
社区植树节活动总结
2015/02/06 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
公司表扬稿范文
2015/05/05 职场文书