属性访问器 - JavaScript | MDN

切换侧边栏

主题

跟随系统
浅色
深色

中文 (简体)

记住语言了解更多

属性访问器

基线广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

属性访问器通过使用点或方括号符号来访问对象的属性。

本文内容

尝试一下

const person1 = {};
person1["firstName"] = "张";
person1["lastName"] = "三";

console.log(person1.firstName);
// 期望输出："张"

const person2 = {
  firstName: "李",
  lastName: "四",
};

console.log(person2["lastName"]);
// 期望输出："四"

语法

js
object.propertyName
object[expression]
object.#privateProperty

描述

我们可以将对象看做是一个关联数组（也称为：映射、字典、散列表、查询表）。这个数组中的键就是这个对象中属性的名称。

访问属性有两种方式：点表示法和方括号表示法。

点号表示法

在 object.propertyName 语法中，propertyName 必须是一个有效的 JavaScript 标识符，也可以是一个保留字。例如，object.$1 有效，而 object.1 无效。

js
const variable = object.propertyName;
object.propertyName = value;

js
const object = {};
object.$1 = "foo";
console.log(object.$1); // 'foo'

js
const object = {};
object.1 = "bar"; // SyntaxError
console.log(object.1); // SyntaxError

在这里，我们从 document 中访问了一个名为 createElement 的方法，并调用了它。

document.createElement("pre");

如果对数字字面量使用方法，并且数字字面量没有指数且没有小数点，请在方法调用之前的点之前留出空白字符，以防止点被解释为小数点。

js
77 .toExponential();
// 或
77
.toExponential();
// 或
(77).toExponential();
// 或
77..toExponential();
// 或
77.0.toExponential();
// 因为 77. === 77.0，没有歧义

此外，私有元素只能在定义它们的类中使用点符号访问。

方括号表示法

在 object[expression] 语法中，expression 应求值为表示属性名称的字符串或 Symbol。因此，它可以是任何字符串字面量形式，例如，包括 1foo'、'!bar!'，甚至是 ' '（空格）。

js
const variable = object[propertyName];
object[propertyName] = value;

以下调用的效果与前一个示例完全相同：

document["createElement"]("pre");

方括号表示之前允许有空格。

document ["createElement"]("pre");

传递对属性名求值的表达式与直接传递属性名的作用相同。

js
const key = "name";
const getKey = () => "name";
const Obj = { name: "张三" };

Obj["name"]; // 返回“张三”
Obj[key]; // 求值为 Obj["name"]，并返回“张三”
Obj[getKey()]; // 求值为 Obj["name"]，并返回“张三”

不过，请注意不要使用方括号访问由外部输入给出名称的属性。这可能会使你的代码受到对象注入攻击。

属性名称

属性名称必须是字符串或 Symbol。任何其他值，包括数值，都会被强制转换为字符串。由于 1 被强制转换为 '1'，因此以下示例会输出 '值'。

js
const object = {};
object["1"] = "值";
console.log(object[1]);

以下代码也会输出 '值'，因为 foo 和 bar 被转换为相同的字符串（"[object Object]"）。

js
const foo = { uniqueProp: 1 };
const bar = { uniqueProp: 2 };
const object = {};
object[foo] = "值";
console.log(object[bar]);

方法绑定

在谈到对象的属性时，通常会区分属性和方法。然而，属性/方法之间的区别不过是一种约定俗成的说法。方法是一种可以被调用的属性（例如，如果它的值是对 Function 实例的引用）。

方法并不与作为其属性的对象绑定。具体来说，方法中的 this 并不固定，也不一定指包含该方法的对象。相反，this 被函数调用“传递”。请参阅 this 的引用。

示例

方括号表示法与 eval()

JavaScript 新手经常会犯一个错误，就是在可以使用方括号表示法的情况下使用了 eval() 代替。

例如，许多脚本中经常出现以下语法。

const x = eval(`document.forms.form_name.elements.${strFormControl}.value`);

eval() 很慢，应尽可能避免使用。而且，此时 strFormControl 必须是一个合法的标识符，这在一些表单控件的 name、id 值之中并不是必要的。所以，使用方括号表示法来代替会更好一些：

const x = document.forms.form_name.elements[strFormControl].value;

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年7月24日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题