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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vue实现一拉到底的滑动验证
Jul 25 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php去掉文件前几行的方法
2015/07/29 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
竞选大队干部演讲稿
2014/09/11 职场文书
绿色校园广播稿
2014/10/13 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Java设计模式之代理模式
2022/04/22 Java/Android