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 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
vue实现拖拽交换位置
Apr 07 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP引用返回用法示例
2016/05/28 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python 错误和异常小结
2013/10/09 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
python实现的简单抽奖系统实例
2015/05/22 Python
python解析xml简单示例
2019/06/21 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
运动会广播稿30字
2014/01/21 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
故宫的导游词
2015/01/31 职场文书
皇城相府导游词
2015/02/06 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Python 多线程处理任务实例
2021/11/07 Python