创建、调用JavaScript对象的方法集锦


Posted in Javascript onDecember 24, 2014

今天在做项目时,遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章,看后跟着打了一遍代码。感觉方法挺好的,在这里与大家分享一下。

  一、利用函数创建对象:

//定义对象

function Animal(type)

{

    this.name="";

    this.type=type;

   this.introduction=function(){

         return "我的名字是: "+this.name+",我属于 "+this.type;

}

}

var  animal=new Animal("家禽");   //实例化我们上面创建的对象

       animal.name="小红";

      alert(animal.introduction());      //调用它的introduction函数(此时,页面会弹出:我的名字是 小红,我属于 家禽);

这种方法,大家一定都很熟悉了。但是,使用这种方法会造成性能的损耗。在这里,我们是通过new关键子来实例化对象的。其实,new关键子是做了两件事。一,定义了一个匿名方法(Animal)。二、调用它。这样就不如我们接下来要介绍的方法高效了。

二、利用对象字面量(object literals):

     不知道翻译的对不对,待会我会把原文地址告诉大家,有兴趣的可以看原文。

//定义对象

    var Book=

    {

          name:"红楼梦",

          type:"文学作品",

          getAuthor:function()

    {

             return :"我是曹雪芹的孩子!";

    }

   }

      alert(Book.GetAuthor());  //调用对象方法,此时页面会出现:我是曹雪芹的孩子。

       Book.name="灌篮";   //修改对象属性

       alert(Book.name);    //此时,页面会弹出:灌篮

   相信大家看到代码,应该明白了为什么说这个方法会高效一些了。因为,它相当于定义了一个JavaScript全局变量。我们可以直接用它,不需要实例化它。但是,这样看起来怪怪的啊。那么,解决方案来了。我们来看看第三种方法吧。

 三、单例模式(Singleton using a function):

     翻译成单例模式,可能不是太妥。先看代码吧:

//定义对象

    var  Gender=new function()

 {

       this.type="女生";

      this.speaking=function()

{

      return "我是"+this.type;

}

}

     alert(Gender.speaking();)   //使用对象  此时页面会出现:我是女生。

  大家看这段儿代码,是不是与我们的方法一很像呢?但是,它可像方法一那样工作的。方法一,用一次对象,就要创建一次对象。这个方法,创建一次对象,就可以永久使用。所以,这种方式,很类似于设计模式中的单例模式。

Javascript 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
js实现九宫格布局效果
May 28 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
jQuery的css()方法用法实例
Dec 24 #Javascript
使用javascript获取页面名称
Dec 23 #Javascript
jQuery类选择器用法实例
Dec 23 #Javascript
基于JQuery制作可编辑的表格特效
Dec 23 #Javascript
JavaScript调试工具汇总
Dec 23 #Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 #Javascript
jQuery元素选择器用法实例
Dec 23 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
python中正则的使用指南
2016/12/04 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python3 实现调用串口功能
2019/12/26 Python
python读取mysql数据绘制条形图
2020/03/25 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
介绍下static、final、abstract区别
2015/01/30 面试题
大学毕业感言一句话
2014/02/06 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
优秀员工推荐信
2014/05/10 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
党员年度个人总结
2015/02/14 职场文书
出纳试用期自我评价
2015/03/10 职场文书
色戒观后感
2015/06/12 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers