Javascript对象字面量的理解


Posted in Javascript onJune 22, 2016

对象字面量的输出方式以及定义好处

1.对象字面量的输出方式有两种:传统的‘。',以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来,如

var box = {
  name:'abc';
  age:28
};
alert(box['name']);

给对象定义方法,

A:如果用传统定义对象的方式,就需要先定义方法,然后再把这个方法名赋值给对象的一个属性,如果要调用这个方法不加括号,就是返回方法代码;如果要调用这个方法该对象属性后面加上括号,就得到方法的返回值

function objrun(){
  return '123';
}
var box = new Object();
box.name='abc';
box.age = 28;
box.run = objrun;
alert(box.run());       //结果为123
// alert(box.run);       //结果为function objrun(){ return '123'; }
//如果box.run = objrun();
//alert(box.run);       //结果为123,如果带上圆括号,就报错啦

B:用字面量定义只需要直接在对象的这个属性上,写function就行,这个function上面没有函数名,他是个匿名函数,那怎么调用这个方法呢,用对象的这个属性名,要调用方法,同上就行

如:

var box = {
  name:'abc',
  age:28,
  run:function(){
    return '123';
  }
}
alert(box.run());

2.对象字面量的定义方式,可以轻松搞定函数大量参数需要一一对应输出的情况。他的对策就是给函数传入一个对象,而这个对象是用字面量的方式定义的,属性和值对应的方式可以一目了然他们的关系,因为函数只是一段代码,必须调用才能执行

如:

function AA(obj){
  alert(obj.name);
  alert(obj.age);
}
var obj = {
  name: 'abc',
  age: 28
}
AA(obj);

js对象字面量的demo

/**
 * @author zhanghua
 */
var literal = {
  add: function(){
    alert("add");
  },
  del: function(){
    alert("delete");
  },
  update: function(){
    alert("update");
  },
  name: "zhangsan",
  callLiteral: function(){
    // 对于当前字面量对象的调用,要加this关键字
    this.add();
  }
};

html文件:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Literal--字面量</title>
    <script type="text/javascript" src="jslib/literal.js"></script>
  </head>
  <body>
    <input type="button" value="add" onclick="javascript:literal.add()"/>
    <input type="button" value="delete" onclick="javascript:literal.del()"/>
    <input type="button" value="update" onclick="literal.update()"/>
    <input type="button" value="name" onclick="javascript:alert(literal.name)"/>
    <input type="button" value="name" onclick='javascript:alert(literal["name"])'"/>
    <input type="button" value="caller" onclick='javascript:literal.callLiteral()'"/>
  </body>
</html>

以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
Javascript闭包与函数柯里化浅析
Jun 22 #Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 #Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 #Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 #Javascript
Javascript实现图片不间断滚动的代码
Jun 22 #Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 #Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 #Javascript
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
javascript简易画板开发
2020/04/12 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python实现桌面托盘气泡提示
2019/07/29 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
平面设计师的工作职责
2013/11/21 职场文书
主题婚礼策划方案
2014/02/10 职场文书
干部下基层实施方案
2014/03/14 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年情人节广告语
2016/01/28 职场文书
golang json数组拼接的实例
2021/04/28 Golang
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Python中itertools库的四个函数介绍
2022/04/06 Python