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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
Javascript 复制数组实现代码
Nov 26 Javascript
js Function类型
Dec 04 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
用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
第四节--构造函数和析构函数
2006/11/16 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
JS实现图片切换特效
2019/12/23 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
银行员工职业规划范文
2014/01/21 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android