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 的扩展方法总结
Oct 01 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
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新手上路(六)
2006/10/09 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
使用Apache的rewrite
2021/03/09 Servers
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
护理专业的自荐信
2013/10/22 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
硕士生工作推荐信
2014/03/07 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
文明家庭事迹材料
2014/12/20 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫