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 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
js 操作符汇总
Nov 08 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
微信小程序实现图片上传
May 23 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jquery实现动态画圆
2014/12/04 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Python单链表简单实现代码
2016/04/27 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python能做哪方面的工作
2020/06/15 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
汽车驾驶求职信
2013/10/25 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
老公婚前保证书
2015/02/28 职场文书
暑期实践个人总结
2015/03/06 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python