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 相关文章推荐
利用javascript判断文件是否存在
Dec 31 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 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
一些星际专用术语解释
2020/03/04 星际争霸
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
php查询内存信息操作示例
2019/05/09 PHP
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python星号*与**用法分析
2018/02/02 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
override和overload的区别
2016/03/09 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
应届生骨科医生求职信
2013/10/31 职场文书
医院门卫岗位职责
2013/12/30 职场文书
体育教师求职信
2014/06/30 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis