正在加载菜单,请稍待......

学习笔记一:创建javascript对象的三种方式

类别:javascript javascript教程

标签:

浏览:100次

明河共影发布于 2009年04月20日

RIA之家技术群:24440797。你可以通过以下方式联络到明河: 1、进入我的微博首页跟随我 2、我的email:riahome@126.com

前几天刚入手《javascript设计模式》这本书,猛读了一下,颇有感悟,对javascript面向对象的写法有了进一步的了解,也解答了以前困惑良久的问题,萌发了写笔记的想法,想把这本书的精华分享给想要了解javascript设计模式的朋友们。

一、三种创建对象的方式

书上有个例子:启动和停止一个动画,一般面向过程的写法如下:

  1. function startAnimation(){
  2.  
  3. }
  4.  
  5.  
  6. function stopAnimation(){
  7.  
  8. }

现在把它改写成一个对象

第一种方式:

  1. var Anim = function(){
  2.  
  3. };
  4.  
  5. Anim.prototype.start = function(){
  6.  
  7. };
  8.  
  9. Anim.prototype.stop = function(){
  10.  
  11. };
  12.  
  13. //实例化对象
  14.  
  15. var myAnim = new Anim();
  16.  
  17. myAnim.start();
  18.  
  19. myAnim.stop();

第二种方式:(偶使用的就是这种方式)

  1. var Anim = function(){
  2.  
  3. };
  4.  
  5. Anim.prototype = {
  6.  
  7.     start : function(){
  8.  
  9.     },
  10.  
  11.     stop : function(){
  12.  
  13.     }
  14.  
  15. };

第三种方式:

  1. Function.prototype.method = function(name,fn){
  2.  
  3.         this.prototype[name] = fn;
  4.  
  5. }
  6.  
  7. var Anim = function(){
  8.  
  9. };
  10.  
  11. Anim.method('start',function(){
  12.  
  13. });
  14.  
  15. Anim.method('stop',function(){
  16.  
  17. });

关于prototype原型的解释,我最早接触的是《javascript高级程序设计》里面的说法,但个人觉得还是太简单了,不是很好理解,百度百科里面找到了关于原型的说明,附上网址:

baike.baidu.com/view/1217697.htm

现在来看看三种方式的优缺点:

第一种方式:将二个方法赋予该类的prototype属性(之所以将类的方法放在prototype属性,是为了避免重复创建函数,要使用prototype属性,必须实例化类),但写法上有点繁琐,而且不是很符合一般类的书写习惯,于是就有了第二种方式的改进版。

第二种方式:强烈推荐这种方式,代码简练,清晰,如果有使用过JQ的话,应该会注意到JQ插件的写法就是这种方式。

第三种方式:我还没有使用过,不敢妄下定论,有兴趣的朋友可以用用看看。(这种方式的优势在于链式调用)。

订阅RIA之家,及时获取RIA之家最新文章:

本文链接:http://www.36ria.com/3

除非特别说明,本站的所有内容均为原创或翻译,所有权属于文章作者,欢迎转载,转载请注明出处,谢谢。