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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
node.js中watch机制详解
Nov 17 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
js制作提示框插件
2020/12/24 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python输入二维数组方法
2018/04/13 Python
python cumsum函数的具体使用
2019/07/29 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
关于Java finally的面试题
2016/04/27 面试题
个人党性剖析材料
2014/02/03 职场文书
《匆匆》教学反思
2014/02/22 职场文书
社区禁毒工作方案
2014/06/02 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
应届生简历自我评价
2015/03/11 职场文书
学生病假条怎么写
2015/08/17 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python