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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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 CI框架插入一条或多条sql记录示例
2014/07/29 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
学生安全责任书
2014/04/15 职场文书
体育比赛口号
2014/06/09 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
工作经历证明书范文
2014/11/02 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
旅游投诉信范文
2015/07/02 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
python实现会员管理系统
2022/03/18 Python