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 相关文章推荐
EasyUi datagrid 实现表格分页
Feb 10 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue3不同环境下实现配置代理
May 25 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下对数组进行排序的函数
2010/08/08 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript使用cookie
2007/02/02 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
浅析vue数据绑定
2017/01/17 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python多层装饰器用法实例分析
2018/02/09 Python
Python可迭代对象操作示例
2019/05/07 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
后勤自我鉴定
2013/10/13 职场文书
培训主管的岗位职责
2013/11/23 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
独生子女证明范本
2015/06/19 职场文书
详细介绍python类及类的用法
2021/05/31 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Redis高可用集群redis-cluster详解
2022/03/20 Redis