javascript 用原型继承来实现对象系统

 更新时间:2010年03月22日 13:19:20   作者:  
对象系统中的继承特性有三种方式:基于类,基于原型,基于元类
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设计模式之命令模式

    这篇文章主要介绍了JavaScript设计模式之命令模式,命令设计模式是由发令者、执行者、命令对象三部分构成,文章由此展开详细的内容介绍,需要的小伙伴可以参考一下
    2022-06-06
  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    这篇文章主要介绍了微信小程序canvas拖拽、截图组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 企业微信扫码登录网页功能实现代码

    企业微信扫码登录网页功能实现代码

    这篇文章主要介绍了企业微信扫码登录网页功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 解析Json字符串的三种方法日常常用

    解析Json字符串的三种方法日常常用

    下面将介绍日常中使用的三种解析json字符串的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • 微信小程序有旋转动画效果的音乐组件实例代码

    微信小程序有旋转动画效果的音乐组件实例代码

    这篇文章主要介绍了微信小程序有旋转动画效果的音乐组件,需要的朋友可以参考下
    2018-08-08
  • JS创建自定义对象的六种方法总结

    JS创建自定义对象的六种方法总结

    这篇文章主要给大家介绍了关于JS创建自定义对象的六种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • javascript 星级评分效果(手写)

    javascript 星级评分效果(手写)

    今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出;首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态,需要的朋友可以参考下
    2012-12-12
  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    本文主要介绍了TypeScript基本数据类型的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 微信小程序记录用户移动轨迹的实战记录

    微信小程序记录用户移动轨迹的实战记录

    最近遇到一个小程序的开发需求,直接可以通过小程序就记录运动轨迹,所以这篇文章主要给大家介绍了关于微信小程序记录用户移动轨迹的相关资料,需要的朋友可以参考下
    2021-08-08
  • js实现简单掷骰子小游戏

    js实现简单掷骰子小游戏

    这篇文章主要为大家详细介绍了js实现简单摇筛子小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论