属性访问器

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

试一试

语法

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的方法并调用它。

js
document.createElement("pre");

如果将方法用于数字字面量，并且数字字面量没有指数和十进制点，则应在方法调用之前的点前面保留空格，以使点不被解释为十进制点。

js
77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity

此外，私有属性只能在定义它们的类中使用点表示法访问。

方括号表示法

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

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

这与前面的示例执行完全相同的事情。

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

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

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

传递计算为属性名称的表达式将与直接传递属性名称的效果相同。

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

Obj["name"]; // returns "Michel"
Obj[key]; // evaluates to Obj["name"], and returns "Michel"
Obj[getKey()]; // evaluates to Obj["name"], and returns "Michel"

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

属性名称

每个属性名称都是一个字符串或Symbol。任何其他值，包括数字，都将强制转换为字符串。这输出'value'，因为1被强制转换为'1'。

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

这也输出'value'，因为foo和bar都转换为相同的字符串（"[object Object]"）。

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

方法绑定

在谈论对象属性时，通常会区分属性和方法。但是，属性/方法的区分只不过是一种约定。方法是可以调用的属性（例如，如果它的值是Function实例的引用）。

方法没有绑定到它是其属性的对象。具体来说，this在方法中没有固定，并且不一定引用包含该方法的对象。相反，this由函数调用“传递”。请参阅this的参考。

示例

方括号表示法与 eval()

JavaScript 初学者经常犯的一个错误是在可以使用方括号表示法的地方使用eval()。

例如，以下语法在许多脚本中经常看到。

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

eval()速度很慢，应尽可能避免。此外，strFormControl必须包含标识符，这对于表单控件的名称和id不是必需的。最好使用方括号表示法代替

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

规范

规范
ECMAScript 语言规范
# sec-property-accessors

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅