创建、调用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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
详解TypeScript中的类型保护
Apr 29 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设计模式之单例模式使用示例
2014/01/20 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Javascript Object.extend
2010/05/18 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
土木工程师岗位职责
2013/11/24 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
财务工作个人总结
2015/02/27 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书