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基础的动画教程,直观易懂
Jan 10 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jquery默认校验规则整理
Mar 24 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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文件锁函数flock()详细介绍
2014/11/18 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python实现截屏的函数
2015/07/26 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
聊聊Python中的pypy
2018/01/12 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python对日志进行处理的实例代码
2018/10/06 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python 多个参数不为空校验方法
2019/02/14 Python
Django工程的分层结构详解
2019/07/18 Python
使用Python实现画一个中国地图
2019/11/23 Python
python自动生成sql语句的脚本
2021/02/24 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
医药代表个人的求职信分享
2013/12/08 职场文书
安全责任书模板
2014/07/22 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android