此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
属性访问器
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
属性访问器通过使用点或方括号符号来访问对象的属性。
In this article
尝试一下
const person1 = {};person1["firstName"] = "张";person1["lastName"] = "三";console.log(person1.firstName);// 期望输出:"张"const person2 = { firstName: "李", lastName: "四",};console.log(person2["lastName"]);// 期望输出:"四"语法
object.propertyNameobject[expression]object.#privateProperty描述
我们可以将对象看做是一个关联数组(也称为:映射、字典、散列表、查询表)。这个数组中的键就是这个对象中属性的名称。
访问属性有两种方式:点表示法和方括号表示法。
点号表示法
在object.propertyName 语法中,propertyName 必须是一个有效的 JavaScript标识符,也可以是一个保留字。例如,object.$1 有效,而object.1 无效。
const variable = object.propertyName;object.propertyName = value;const object = {};object.$1 = "foo";console.log(object.$1); // 'foo'const object = {};object.1 = "bar"; // SyntaxErrorconsole.log(object.1); // SyntaxError在这里,我们从document 中访问了一个名为createElement 的方法,并调用了它。
document.createElement("pre");如果对数字字面量使用方法,并且数字字面量没有指数且没有小数点,请在方法调用之前的点之前留出空白字符,以防止点被解释为小数点。
77 .toExponential();// 或77.toExponential();// 或(77).toExponential();// 或77..toExponential();// 或77.0.toExponential();// 因为 77. === 77.0,没有歧义此外,私有元素只能在定义它们的类中使用点符号访问。
方括号表示法
在object[expression] 语法中,expression 应求值为表示属性名称的字符串或Symbol。因此,它可以是任何字符串字面量形式,例如,包括1foo'、'!bar!',甚至是' '(空格)。
const variable = object[propertyName];object[propertyName] = value;以下调用的效果与前一个示例完全相同:
document["createElement"]("pre");方括号表示之前允许有空格。
document ["createElement"]("pre");传递对属性名求值的表达式与直接传递属性名的作用相同。
const key = "name";const getKey = () => "name";const Obj = { name: "张三" };Obj["name"]; // 返回“张三”Obj[key]; // 求值为 Obj["name"],并返回“张三”Obj[getKey()]; // 求值为 Obj["name"],并返回“张三”不过,请注意不要使用方括号访问由外部输入给出名称的属性。这可能会使你的代码受到对象注入攻击。
属性名称
属性名称必须是字符串或Symbol。任何其他值,包括数值,都会被强制转换为字符串。由于1 被强制转换为'1',因此以下示例会输出'值'。
const object = {};object["1"] = "值";console.log(object[1]);以下代码也会输出'值',因为foo 和bar 被转换为相同的字符串("[object Object]")。
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;规范
| Specification |
|---|
| ECMAScript® 2026 Language Specification> # sec-property-accessors> |