`
white182517
  • 浏览: 162697 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

前言

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 的测试框架

分享到:
评论

相关推荐

    prototype.js 1.4版开发者手册(强烈推荐)

    5. **类与继承**:Prototype.js引入了模拟类的概念,通过`Class.create`可以创建新的类,并使用`Object.extend`进行类的继承,从而实现了JavaScript中的面向对象编程。 6. **JSON支持**:1.4版中,Prototype.js提供...

    prototype.js源码解度

    《prototype.js源码解读》 Prototype.js 是一个广泛使用的 JavaScript 库,它的设计目标是扩展JavaScript的基本功能,提供更丰富的面向对象编程体验。通过阅读和理解Prototype.js的源码,可以深入了解JavaScript...

    prototype-1.4.0源码解读.js

    《Prototype 1.4.0 源码解读:深入理解JavaScript库的基石》 Prototype 是一个著名的JavaScript库,它的1.4.0版本在Web开发领域有着广泛的使用。这个库为JavaScript程序员提供了许多实用的功能,包括对象扩展、类...

    prototype-1.6.0.2.js.rar

    Prototype.js 是一款广泛使用的JavaScript库,它极大地扩展了JavaScript的基本功能,提供了丰富的DOM操作、事件处理、Ajax交互以及对象扩展等工具,使得JavaScript编程变得更加简洁高效。在"prototype-1.6.0.2.js....

    prototype.js 1.4版开发者手册.doc

    Prototype.js 提供了对JavaScript对象和类的扩展,引入了一些概念,如类继承和模拟Ruby语言中的类。例如,它通过`Class.create()`方法支持类的创建,并且可以使用`Object.extend()`进行对象扩展。这些功能允许...

    最新Prototype手册

    1. **Object.extend**:这个方法允许开发者扩展任何对象的属性和方法,这是Prototype.js实现面向对象编程的基础。 2. **$** 和 **$$** 函数:`$`是选择元素的快捷方式,类似于jQuery中的`$(selector)`;`$$`则用于...

    prototype1.6.0源码解读.js

    Prototype 1.6.0 在其核心设计中采用了面向对象的思想,通过自定义 `Class.create` 方法实现了类的创建、继承以及方法的重写。此外,通过对浏览器特性的检测,能够更好地兼容不同环境下的运行需求。这些特性使得...

    prototype 1.3 源码解读

    ### Prototype 1.3 源码解读 #### 前言 Prototype 是一个轻量级的 JavaScript 库,它简化了 DOM 操作,并提供了一系列便捷的方法来处理对象、数组等基本类型。版本 1.3 相对于之前的 1.2 版本有了不少改进与增强,...

    Prototype API

    "prototype.js 1.4.0 开发笔记中文版"很可能提供了针对该版本的详细解读和开发实践,对于学习和理解Prototype API 的具体用法和最佳实践非常有帮助。 综上所述,Prototype API 和 Scriptaculous 提供了丰富的...

    prototype1.4源码解读

    2. 继承机制:Prototype使用了基于原型的继承模型,通过`Prototype.extend()`方法实现对象的扩展,同时支持多重继承。此外,`Object.clone()`用于创建对象的浅复制,`Object.merge()`则实现了对象的合并。 3. 事件...

    prototype1.4

    - `Object.prototype.clone()`方法则实现了对象的深复制,创建了一个与原对象完全独立的新对象。 2. **函数增强** - Prototype 1.4中,函数可以被当作对象处理,支持添加属性和方法,例如`bind()`方法可以将函数...

    JavaScript学习指南 第二版

    2. 类和继承:JavaScript ES6引入了类的语法糖,理解类和原型链的关系,以及如何通过extends实现继承。 3. 寄生构造函数、工厂模式、单例模式等设计模式,以及如何利用原型实现继承。 4. 模块化:掌握CommonJS、...

    Prototype源码解读

    通过深入分析 Prototype 的源码,我们可以学习到如何高效地编写 JavaScript 代码,理解面向对象编程在 JavaScript 中的应用,以及如何利用原型链实现继承和扩展原生对象。这些知识对于提升 JavaScript 编程技巧和...

    【Prototype 1.4.0】源码解读----全文注释版

    - `Object.extend(destination, source)`:实现了属性和方法的浅复制,即从`source`对象复制所有可枚举属性到`destination`对象。 - `Object.inspect(object)`:尝试获取对象的可读字符串表示。如果对象有`inspect...

    每个开发者都应该知道的33个JavaScript概念.zip

    12.原型(Prototype):JavaScript对象有一个内置的原型属性,允许对象继承其他对象的属性和方法。 13. 原型链(Prototype Chain):通过原型实现继承,形成了一个查找属性的链条。 14. instanceof运算符:检测一...

    Javascript中55个经典技巧

    32. **迭代器协议**:实现`Symbol.iterator`方法,使对象成为可迭代的。 33. **正则扩展**:新的正则表达式特性,如命名捕获组、Unicode属性等。 34. **函数参数的尾调用优化**:在某些情况下,优化函数内部的递归...

    jQuery核心源码中文注释解读

    总的来说,jQuery的核心源码涉及到了JavaScript的函数、对象、原型链、继承、作用域等多个关键概念。通过对这些内容的理解,开发者可以更高效地利用jQuery进行DOM操作、事件处理和动画创建,从而提升Web应用的性能和...

    JavaScript中创建对象和继承示例解读

    对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F....

Global site tag (gtag.js) - Google Analytics