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 相关文章推荐
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
javascript生成大小写字母
Jul 03 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
vue-cli配置文件——config篇
Jan 04 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
Vuex中实现数据状态查询与更改
Nov 08 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
Yii框架form表单用法实例
2014/12/04 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python 字符串定义
2009/09/25 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python PO设计模式的具体使用
2019/08/16 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
如何给Python代码进行加密
2020/01/10 Python
Python requests设置代理的方法步骤
2020/02/23 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
法制宣传实施方案
2014/03/13 职场文书
出国英文推荐信
2014/05/10 职场文书
车辆工程专业求职信
2014/06/14 职场文书
离职报告格式
2014/11/04 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
R9700摩机记
2022/04/05 无线电