JavaScript对象字面量详解：定义、访问与方法调用
本文深入解析JavaScript对象字面量的核心用法。涵盖通过点运算符与方括号访问属性的两种方式，对比传统构造函数与字面量定义对象方法的差异，重点介绍匿名函数的定义与调用。此外，演示如何利用字面量对象作为参数传递，以简化多参数函数的调用逻辑，提升代码可读性。
对象字面量概述
本节介绍对象字面量的输出方式及其定义优势。
属性访问方式
对象字面量的属性访问主要有两种模式：一是使用传统的点运算符（.），二是使用数组下标方式。在使用数组下标方式时，属性名必须用引号包裹，例如：
var box = {
name:'abc';
age:28
};
alert(box['name']);对象方法的定义与调用
接下来探讨如何在对象中定义方法。
若采用传统方式定义对象，需先独立定义函数，再将该函数引用赋值给对象的属性。调用时，若不加括号，将返回函数代码本身；若在属性名后加上括号，则执行函数并返回结果。
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，如果带上圆括号，就报错啦若采用字面量方式定义，只需在属性名后直接赋值一个函数。该函数通常没有名称，即匿名函数。调用此方法时，同样通过属性名加括号的方式执行，逻辑与传统方式一致。
具体示例如下：
var box = {
name:'abc',
age:28,
run:function(){
return '123';
}
}
alert(box.run());利用字面量优化参数传递
对象字面量的另一种优势在于处理函数参数较多的情况。传统方式要求参数一一对应，容易出错。通过传入一个用字面量定义的对象，属性名与值的对应关系一目了然。由于函数仅是代码块，必须通过调用才能执行，这种方式能显著提升代码的可读性和维护性。
示例代码如下：
function AA(obj){
alert(obj.name);
alert(obj.age);
}
var obj = {
name: 'abc',
age: 28
}
AA(obj);
完整代码示例
以下是JavaScript对象字面量的完整演示。
/**
* @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代码风格指南》，感谢支持。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58