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的动画类 Fx.js
Nov 05 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JavaScript字符串对象
Jan 14 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
React Form组件的实现封装杂谈
May 07 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
javascript刷新父页面方法汇总详解
Oct 10 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(一)
2012/03/21 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python的多态性实例分析
2015/07/07 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python 忽略文件名编码的方法
2020/08/01 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
个人自我剖析材料
2014/02/07 职场文书
《识字五》教学反思
2014/03/01 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
应届毕业生自荐信
2014/05/28 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
婚宴主持词
2015/06/30 职场文书
开学随笔
2015/08/15 职场文书