创建、调用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解决iframe高度自适应代码
Dec 20 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue多次循环操作示例
Feb 08 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php分页代码学习示例分享
2014/02/20 PHP
php文件上传简单实现方法
2015/01/24 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
babel基本使用详解
2017/02/17 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
与UNIX有关的几个名词
2015/09/17 面试题
班组长的岗位职责
2013/12/09 职场文书
学习委员自我鉴定
2014/01/13 职场文书
五年级音乐教学反思
2014/02/06 职场文书
工作证明格式及范本
2014/09/12 职场文书