创建、调用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 事件执行检测代码
Dec 09 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
基于Vue实现timepicker
Apr 25 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
JS闭包经典实例详解
Dec 20 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 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
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python编程中的文件操作攻略
2015/10/16 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python实现FTP循环上传文件
2020/03/20 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
2015年大学班级工作总结
2015/04/28 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python