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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jquery中radio checked问题
Mar 16 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
浅析vue component 组件使用
Mar 06 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
用python绘制樱花树
2020/10/09 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
结婚邀请函范文
2014/01/14 职场文书
会计自我鉴定
2014/02/04 职场文书
扬尘污染防治方案
2014/06/15 职场文书
社区志愿者活动方案
2014/08/18 职场文书
现场活动策划方案
2014/08/22 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
高中美术教学反思
2016/02/17 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python