论坛首页 → Web前端技术论坛 →

解读prototype.js：如何实现对象继承

浏览 3429 次
锁定老帖子 主题：解读prototype.js：如何实现对象继承
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
作者 正文
  • white182517
  • 等级: 三星会员
  • 性别:
  • 文章: 61
  • 积分: 330
  • 来自: 北京
   发表时间：2006-12-15  

前言

prototype.js最令我心仪的功能之一，就是可以很容易使用类似JAVA语言一样的方式构建对象模型，如何使用prototype.js构建对象模型呢？

这是通过prototype.js定义的Class和Object两个对象来实现的。

假定我们需要构建一个Shape对象表示一种形状，这个形状有一个功能是把自己绘制出来，另外有一个子类Circle表示圆形，要实现这样的对象结构的完整代码如下：

js 代码
  1. var Shape = Class.create();   
  2. Shape.prototype={   
  3.     initialize:function(){   
  4.     },   
  5.        
  6.     paint:function(){   
  7.     }      
  8. };   
  9.   
  10. var Circle = Class.create();   
  11. Circle.prototype=Object.extend(new Shape(), {   
  12.   //一个圆由中心点和半径组成   
  13.   initialize:function(centerX,centerY,radius){   
  14.     this.centerX = centerX;   
  15.     this.centerY = centerY;   
  16.     this.radius = radius;   
  17.     },   
  18.        
  19.     paint:function(){   
  20.     }     
  21. }  

使用Class定义类

Class对象在声明其他的类的时候使用。用这个对象的create方法声明一个变量，就相当于java中定义了一个类，类名就是变量名称，而且这个类就支持initialize方法，类似于构造函数功能。

如下代码就创建了一个名称为Shape的类。

js 代码
  1. var Shape = Class.create();   

然后可以定义这个类的变量和方法，采用javascript的prototype函数，下面的代码定义了一个initialize方法（相当于构造函数）和一个paint方法。

  1. Shape.prototype={   
  2.     initialize:function(){   
  3.     },   
  4.        
  5.     paint:function(){   
  6.     }      
  7. };  
js 代码

使用Object实现继承

Object对象有两个重要的方法。

  • extend(destination,source)------这是一个静态方法，其功能是通过将source对象的所有属性和方法复制到destination对象来提供一种继承机制。可以通过Object.extend(......)方式调用。
  • extend(object)------将传入的参数object 对象中的所有属性和方法复制到调用方法的对象来提供一种继承机制。

这里我们使用静态方法来实现，下述代码的含义是Circle类将具有Shape类的所有属性和方法，Circle提供一个构造函数，接受三个参数分别表示中心点X,Y和半径。

js 代码
  1. Circle.prototype=Object.extend(new Shape(), {   
  2.   //一个圆由中心点和半径组成   
  3.   initialize:function(centerX,centerY,radius){   
  4.     this.centerX = centerX;   
  5.     this.centerY = centerY;   
  6.     this.radius = radius;   
  7.     },   
  8.        
  9.     paint:function(){   
  10.     }     
  11. }  

如何使用

刚才有讲过通过Class.create方法使类支持initialize方法，类似于构造函数的功能。比如要构建一个中心点坐标为(3,4)，半径为5的圆，并让他绘制自己，使用如下代码：

js 代码
  1. var circle = new Circle(3,4,5);   
  2. circle.paint();  

后话：Class和Object应该是prototype.js的基石，其他所有的对象定义都基于这种机制。很多使用prototype.js的开源组件库也使用此功能定义对象结构，比如script.aculo.us 的测试框架。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics