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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
潜说js对象和数组
May 25 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
浅析JavaScript动画
Jun 10 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
解析js如何获取css样式
Dec 11 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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实现转换ubb代码的方法
2015/06/18 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python最基本的输入输出详解
2015/04/25 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
浅析Python 条件控制语句
2020/07/15 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
安全生产承诺书范文
2014/05/22 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
工作报告范文
2019/06/20 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python