创建、调用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 相关文章推荐
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
基于JSON数据格式详解
Aug 31 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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聊天室技术
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php eval函数用法总结
2012/10/31 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python如何快速拼接字符串
2020/10/28 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
气象学专业个人求职信
2014/03/15 职场文书
社区禁毒工作方案
2014/06/02 职场文书
2014年节能工作总结
2014/12/18 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技