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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 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实现多关键字加亮功能
2016/10/21 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
详解Vue SPA项目优化小记
2018/07/03 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python实现图片彩色转化为素描
2019/01/15 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
汇科协同Java笔试题
2012/03/31 面试题
关于运动会的口号
2014/06/07 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS