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 中的replace方法说明
Apr 13 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php数据访问之查询关键字
2016/05/09 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
微信小程序实现无限滚动列表
2020/05/29 Javascript
vue实例的选项总结
2020/06/09 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python中is和==的区别详解
2018/11/15 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
2015年重阳节主持词
2015/07/04 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python