屬性訪問器
屬性訪問器透過使用點表示法或方括號表示法來訪問物件的屬性。
試一試
const person1 = {};
person1["firstName"] = "Mario";
person1["lastName"] = "Rossi";
console.log(person1.firstName);
// Expected output: "Mario"
const person2 = {
firstName: "John",
lastName: "Doe",
};
console.log(person2["lastName"]);
// Expected output: "Doe"
語法
object.propertyName
object[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"; // SyntaxError
console.log(object.1); // SyntaxError
這裡，名為 createElement 的方法從 document 中檢索並被呼叫。
document.createElement("pre");
如果你將方法用於數字字面量，且數字字面量沒有指數和小數點，你應該在方法呼叫前的點之前留下空格，這樣點就不會被解釋為小數點。
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!'，甚至 ' '（一個空格）。
const variable = object[propertyName];
object[propertyName] = value;
這與上一個示例的作用完全相同。
document["createElement"]("pre");
方括號表示法前允許有空格。
document ["createElement"]("pre");
傳遞求值為屬性名稱的表示式與直接傳遞屬性名稱的作用相同。
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'。
const object = {};
object["1"] = "value";
console.log(object[1]);
這也輸出 'value'，因為 foo 和 bar 都被轉換為相同的字串（"[object Object]"）。
const foo = { uniqueProp: 1 };
const bar = { uniqueProp: 2 };
const object = {};
object[foo] = "value";
console.log(object[bar]);
方法繫結
在談論物件的屬性時，通常會區分屬性和方法。然而，屬性/方法的區別不過是一種約定。方法是可以呼叫的屬性（例如，如果它的值是對一個Function例項的引用）。
方法不繫結到它所屬的物件。具體來說，this 在方法中不是固定的，並不一定指包含該方法的物件。相反，this 是透過函式呼叫“傳遞”的。請參閱this 的參考。
示例
方括號表示法與 eval()
JavaScript 初學者經常犯一個錯誤，在可以使用方括號表示法的地方使用eval()。
例如，以下語法在許多指令碼中很常見。
const x = eval(`document.forms.form_name.elements.${strFormControl}.value`);
eval() 速度慢，應儘可能避免。此外，strFormControl 必須儲存一個識別符號，而表單控制元件的名稱和 id 不需要這樣做。最好使用方括號表示法代替。
const x = document.forms.form_name.elements[strFormControl].value;
規範
| 規範 |
|---|
| ECMAScript® 2026 語言規範 # sec-property-accessors |
瀏覽器相容性
載入中…