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 操作Word和Excel的实现代码
Oct 26 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
详解js的六大数据类型
Dec 27 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
Node.js笔记之process模块解读
May 31 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python群发邮件实例代码
2014/01/03 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
文明餐桌行动实施方案
2014/02/19 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
大学毕业生自我评价
2015/03/02 职场文书
小学教研工作总结2015
2015/05/13 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书