javascript 用原型继承来实现对象系统


Posted in Javascript onMarch 22, 2010

javascript中,对象没有原型,而构造器有原型
原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A

/*申明2个构造器*/ 
var flower=function(){ 
this.name="nokia"; 
} 
var flower2=function(){ 
this.age=22; 
} 
/*原型链*/ 
flower2.prototype=new flower(); 
/*根据刚才原型的定义,实例obj必然复制自new flower();*/ 
obj=new flowe2(); 
/*从父类继承的属性*/ 
alert(obj.name); //==>"nokia" 
alert(obj.age); //==>22

一个构造器产生的实例,其constructor属性默认总是指向该构造器
alert(obj.constructor);//==>flower
构造器原型的constructor属性 指向构造器本身
alert(flower.prototype.constructor==flower);//==>true
constructor会与原型继承发生的冲突
function flower(){} 
function flower2(){} 
flower2.prototype=new flower(); 
var obj1=new flower(); 
var obj2=new flower2(); 
/*问题出现了,2个实例的constructor属性都指向flower*/ 
alert(obj1.constructor==obj2.constructor); 
/*obj1和obj2是不同的构造器产生的实例,缺指向相同的构造器,显然出了问题*/

解决的方法
flower2.prototype=new flower(); 
/*重置原型后,修改原型的constructor属性*/ 
flower2.prototype.constructor=flower2 
或每次构造实例时都重写constructor属性 
function flower2(){ 
this.constructor=arguments.callee; 
} 
flower2.prototype=new flower();

此外原型继承没有提供调用父类的方法
然而我们基于原型继承,通过静态变量记录父类来弥补这一缺陷
var Class={ 
create:function() 
{ 
var _class=function() 
{ 
this.init.apply(this,arguments); 
} 
_class.prototype.init=Function.prototype.init; 
try{ 
return _class; 
}finally{ 
_class=null; 
} 
} 
}; 
//默认构造函数 
Function.prototype.init=function(){} 
//方法扩展 
Function.prototype.extend=function(list) 
{ 
for(var i in list)this.prototype[i]=list[i]; 
return this; 
} 
//多级继承 
Function.prototype.inherits=function(parent) 
{ 
//继承的深度级别 
var _depth=0; 
//方法属性移植 
this.extend(new parent()); 
//初始化构造函数 类的继承通常不继承构造函数 
this.prototype.init=Function.prototype.init; 
//类的静态父类 
this.parent=parent; 
//执行父类函数 
this.prototype.parent=function(name) 
{ 
//若没有参数则执行构造函数 
if(!name)name='init'; 
//即将执行的父类 
var _parent=parent; 
//若当前已经在父类中执行则继续向上寻找超类 
if(_depth) 
{ 
for(var i=0;i<_depth;i++) 
{ 
_parent=_parent.parent; 
} 
} 
//设置好级别 
_depth++; 
try{ 
//执行函数并返回值 
return _parent.prototype[name].apply(this,Array.prototype.slice.apply(arguments,[1])); 
}catch(e){ 
throw(e); 
}finally{ 
//恢复级别 
_depth--; 
} 
} 
return this; 
}

例子:
//创建名为class1的构造器 
var class1=Class.create().extend({ 
b:function() 
{ 
alert('clas'); 
alert(this.c); 
}, 
c:100 
}); 
//创建"对象"(构造器)的实例 
var s=new class1(); 
s.b();// ==>"clas",100

继承父类,并调用父类的方法:
var test=Class.create().inherits(class1).extend({ 
b:function() 
{ 
alert('test'); 
this.parent('b') 
}, 
c:110 
});
Javascript 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
用js实现的自定义的对话框的实现代码
Mar 21 #Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 #Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 #Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 #Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 #Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 #Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php数组合并的二种方法
2014/03/21 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
基于javascript的拖拽类封装详解
2019/04/19 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python 的AES加密与解密实现
2019/07/09 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
18岁生日感言
2014/01/12 职场文书
对标管理实施方案
2014/03/12 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2014年人民调解工作总结
2014/12/08 职场文书