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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
JavaScript中this详解
Sep 01 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
javascript中的this作用域详解
Jul 15 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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/08/18 杂记
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
web前端开发也需要日志
2010/12/09 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
linux下python抓屏实现方法
2015/05/22 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
详解Python编程中time模块的使用
2015/11/20 Python
python定时关机小脚本
2018/06/20 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
网络方面基础面试题
2012/11/16 面试题
Ruby如何定义一个类
2012/10/08 面试题
怎么写好自荐信
2013/10/30 职场文书
关于工作经历的证明书
2014/10/11 职场文书
应届毕业生自荐信
2015/03/04 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫