• JavaScript 创建对象方法列举
    时间:2012-02-16   作者:佚名   出处:互联网

    JavaScript 中没有类的概念,所以它的对象也与基于类的语言中的对象有所不同。创建一个JavaScript对象有如下的方式,由浅入深一 一列举对比。

          基础模式
          使用JavaScript中的Object来创建,如下代码:
     
     
    Java代码 
    var computer=new Object(); 
    computer.color="White"; 
    computer.brand="Apple"; 
    computer.description=function(){ 
       console.log(this.brand+","+this.color+" computer"); 
    }; 
     
           这种方式的缺点在于,如果创建很多对象,就需要有很多重复的代码,除了在测试及简单应用中使用上面的方式,基本很少使用了。
          工厂模式
           抽象出创建具体对象的过程,通过函数来间接生成对象,如下:
     
     
    Js代码 
    function createComputer(color,brand){ 
        var o=new Object(); 
        o.color=color; 
        o.brand=brand; 
        o.description=function(){ 
             console.log(this.brand+","+this.color+" computer"); 
        }; 

     
     
    var macbookpro=createComputer("White","Apple"); 
    var thinkpad=createComputer("black","IBM");  
     
        使用这种设计模式解决了创建多个相似对象的问题,但由于是通过函数方式来生成对象,所以无法识别一个对象的类型。
     
         构造函数类型
        通过创建自定义的构造函数,在构造函数中定义对象的属性和方法,如下代码:
     
     
    Js代码 
    function Computer(color,brand){ 
        this.color=color; 
        this.brand=brand; 
        this.description=function(){ 
            console.log(this.brand+","+this.color+" computer"); 
        }; 

     
    var macbookpro=new Computer("White","Apple"); 
    var thinkpad=new Computer("black","IBM");  
     
       可以看到,创建实例的时候,使用了关键字new操作符,这种方式的缺点就是每一个方法均需要在创建每一个实例的时候再创建一次。当然,我们可以把方法放在构造函数外面,通过函数变量指向外部方法来避免这个问题,但这样就破坏了OO的封装性,同时,所有的外部方法函数,均变为了"全局函数”。
       【注】在使用new创建一个新的实例的时候,经过四个步骤。创建一个新对象;将构造函数的作用域给新对象(此时this就会指向这个新对象);执行构造函数中的代码(为新对象添加属性);返回新对象.
     
        原型模式
        JavaScript中的每一个函数都有一个prototype属性,它可以包含由特定类型的所有实例共享的属性与方法,即生成一个让所有对象实例共享属性方法的原型对象类型。如下代码:
     
     
    Js代码 
    function Computer(){}; 
    Computer.prototype.color="White"; 
    Computer.prototype.brand="Apple"; 
    Computer.prototype.description=function(){ 
       console.log(this.brand+","+this.color+" computer"); 
    }; 
     
    var macbookpro1=new Computer(); 
    var macbookpro2=new Computer(); 
     
        即macbookpro1与macbookpro2两个变量访问同一组属性与方法。当然,上面的代码可以使用字面变量的方式重新写一下
     
     
    Js代码 
    function Computer(){}; 
     
    Computer.prototype={ 
        constructor: Computer, 
                 color:"White", 
               brand:"Apple", 
       description:function(){ 
            console.log(this.brand+","+this.color+" computer"); 
       } 
    }; 
     
    var macbookpro1=new Computer(); 
    var macbookpro2=new Computer(); 
     
         【注】以上在字面变量中添加constructor属性,并将其指向Computer对象,是因为使用字面变量的方式整体重写了Computer.prototype对象,造成Computer.prototype.constructor不是指向默认的Computer对象。
     
        使用原型对象会有意想不到的效果,比如动态地添加一些属性。但同时,由于原型中所有属性是被很多实例所共享的,如果有属性是引用型的,那么只要在一个实例中改变这个引用型属性的值,所有其它的实例也会被影响。
     
         构造函数+原型模式
          结合这两种模式,可以使得每个实例都会有一份自已的实例属性副本,同时也共享对方法的引用,最大限度节省了内存。如下:
     
     
    Js代码 
    function Computer(color,brand){ 
        this.color=color; 
        this.brand=brand; 
    }; 
     
    Computer.prototype={ 
        constructor: Computer, 
       description:function(){ 
            console.log(this.brand+","+this.color+" computer"); 
       } 
    }; 
     
    var macbookpro=new Computer("White","Apple"); 
    var thinkpad=new Computer("black","IBM");  
     
        这种模式算是标准的模式了,如果觉得构造函数与原型分开定义了,可以使用动态原型,将原型放入构造方法中,如下:
     
     
    Js代码 
    function Computer(color,brand){ 
        this.color=color; 
        this.brand=brand; 
     
        if(typeof this.description != 'function'){ 
             Computer.prototype.description=function(){ 
                 console.log(this.brand+","+this.color+" computer"); 
             }; 
        } 
    }; 

    网友留言/评论

    我要留言/评论

    相关文章

    为程序员和设计师准备的10个流程图:流程图是一样很有用的工具。它可以用来帮助你做决策,给你一步一步的引导。对于很多复杂的设计和流程来说,流程图是必不可少的。和其他图形一样,流程图让你直观的理解一个流程,甚至有可能帮助你找出流程中的问题或者瓶颈。
    IOS APP设计流程步骤分享:移动平台是下一个战场,IOS又是其中占比非常大的平台,关于IOS的设计流程看到一篇不错的译文,根据原文整理了这11步,与大家分享一下.
    Facebook员工经验分享:重视数据但不盲从:本文作者曾在Facebook从事4年多的开发工作,这一段宝贵的工作经历汇聚成为10条人生箴言,希望每一位开发者阅读本文后,都能够从中获益。
    6 个超炫的免费 jQuery 翻页插件:模拟真实的世界一直是计算机科学在做的事情。在网页设计领域,模拟书籍翻页就是其中一项。以前我们用Flash实现。但是随着网页技术的提升,我们现在也可以用HTML、CSS和JavaScript实现。下面我将介绍几个绚丽的免费jQuery插件来实现翻页效果。
    tcpdump 的使用实例:对tcpdump了解较少,查了不少资料方弄出个大概,下面把使用方法记录一下。
    将项目迁移到 Git 的八个理由:最近谈到版本控制,所有人都在谈Git。当然随意的谈论并不能让你下定决心迁移到Git。这里列出了八条有分量的理由,让你加入Git阵营。
    送给设计师们的礼物:10个网站提高你的创意理念:无论你是不是设计师,在乏味的生活中,都渴望寻找那一丝丝的灵感,这里给大家介绍10个网站,让你第一时间可以获取最新的国外设计概念,也许可以帮你获得更多的创意理念,打开你的思想的枷锁。
    10 个不错的 HTML5 类型网站:HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。本文专题将带您体验HTML 5,深入下一代Web开发标准。下面我们看一下下面10个不错的HTML5 类型网站。
    10 个最新 UI 图资源免费下载:这些资源包括定制标签、下载、开关、滑动条、搜索、单/复选框以及更多。它也包括了Photoshop PSD源图。
    出色的用户体验的5个标志:如果你最近使用过的移动社交网络应用Path,我想你应该已经迷上了它出众的用户体验。Path的设计非常精巧,同时它也很容易使用。红色为主的配色方案以及设计平滑的导航条都充满了运动气息。这个社交应用,能够让用户非常容易地找到好友。这得益于Path的关联推荐以及与Facebook的连接。