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的一行代码轻松实现拖动效果
Dec 28 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js微信分享API
Oct 11 Javascript
学习Node.js模块机制
Oct 17 Javascript
小程序实现列表删除功能
Oct 30 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python通过post提交数据的方法
2015/05/06 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
python 决策树算法的实现
2020/10/09 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
高一自我鉴定
2013/12/17 职场文书
实习生的自我评价
2014/01/08 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
家长通知书家长意见
2015/06/03 职场文书
PHP新手指南
2021/04/01 PHP
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis