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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JS之相等操作符详解
Sep 13 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
vue实现登陆页面开发实践
May 30 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构造函数的继承方法
2015/02/09 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
Prototype Function对象 学习
2009/07/12 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
用原生js做单页应用
2017/01/17 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
投标承诺函范文
2015/01/21 职场文书
邀请函怎么写
2015/01/30 职场文书
青年联谊会致辞
2015/07/31 职场文书
小学体育教学随笔
2015/08/14 职场文书