创建、调用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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js 图片等比例缩放代码
May 13 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
node.js文件上传处理示例
Oct 27 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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判断变量类型常用方法
2012/04/24 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
vue组件间通信解析
2017/03/01 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python的常见命令注入威胁
2013/02/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python使用列表的最佳方案
2020/08/12 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
JSF界面控制层技术
2013/06/17 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
护士进修自我鉴定
2014/02/07 职场文书
科级干部考察材料
2014/02/15 职场文书
厕所文明标语
2014/06/11 职场文书
绿色出行口号
2014/06/18 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Redis分布式锁的7种实现
2022/04/01 Redis
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技