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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
js实现下一页页码效果
Mar 07 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
浅谈Web Storage API的使用
Jun 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
js验证密码强度解析
2020/03/18 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python functools模块学习总结
2015/05/09 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
出纳岗位职责范本
2013/12/01 职场文书
生产部经理岗位职责
2013/12/16 职场文书
给实习单位的感谢信
2014/02/01 职场文书
高中教师考核方案
2014/05/18 职场文书
防灾减灾活动总结
2014/08/30 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
春节随笔
2015/08/15 职场文书