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架构javascript基础体系
Jan 01 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
关于js遍历表格的实例
Jul 10 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
opencv 阈值分割的具体使用
2020/07/08 Python
C++程序员求职信范文
2014/04/14 职场文书
五一活动标语
2014/06/30 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
移除Selenium中window.navigator.webdriver值
2022/06/10 Python