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 相关文章推荐
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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也可以?成Shell Script
2006/10/09 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
js实现筛选功能
2020/11/24 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python ubplot使用方法解析
2020/01/10 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
教师旷工检讨书
2014/01/18 职场文书
教师考核材料
2014/05/21 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
学术会议开幕词
2016/03/03 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python