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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
Javascript继承机制详解
May 30 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
javascript实现多边形碰撞检测
Oct 24 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
基于python 取余问题(%)详解
2020/06/03 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
请说出以下代码输出什么
2013/08/30 面试题
女子职高个人自荐书
2014/02/01 职场文书
道路交通安全实施方案
2014/03/12 职场文书
物资采购方案
2014/06/12 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
python元组打包和解包过程详解
2021/08/02 Python