Property accessors

Try it

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"

Cú pháp

object.propertyName
object[expression]
object.#privateProperty

Mô tả

Có thể nghĩ về một đối tượng như một mảng kết hợp (còn gọi là map, dictionary, hash, lookup table). Các khóa trong mảng này là tên của các thuộc tính của đối tượng.

Có hai cách để truy cập thuộc tính: ký hiệu dấu chấm và ký hiệu ngoặc vuông.

Ký hiệu dấu chấm

Trong cú pháp object.propertyName, propertyName phải là một định danh JavaScript hợp lệ, có thể là một từ khóa dành riêng. Ví dụ, object.$1 là hợp lệ, trong khi object.1 thì không.

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

Ở đây, phương thức có tên createElement được lấy từ document và được gọi.

document.createElement("pre");

Nếu bạn sử dụng phương thức với một số nguyên literal, và số literal đó không có số mũ và không có dấu thập phân, bạn nên để khoảng trắng trước dấu chấm trước lệnh gọi phương thức, để dấu chấm không bị hiểu là dấu thập phân.

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

Ngoài ra, private elements chỉ có thể được truy cập bằng ký hiệu dấu chấm bên trong class định nghĩa chúng.

Ký hiệu ngoặc vuông

Trong cú pháp object[expression], expression cần trả về một chuỗi hoặc Symbol đại diện cho tên thuộc tính. Vì vậy, nó có thể là bất kỳ chuỗi literal nào, ví dụ bao gồm '1foo', '!bar!', hoặc thậm chí ' ' (một dấu cách).

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

Đoạn này thực hiện chính xác điều tương tự như ví dụ trước.

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

Khoảng trắng trước ký hiệu ngoặc vuông được phép.

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

Truyền các biểu thức trả về tên thuộc tính sẽ cho kết quả tương tự như truyền trực tiếp tên thuộc tính.

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"

Tuy nhiên, hãy cẩn thận khi sử dụng ngoặc vuông để truy cập các thuộc tính mà tên của chúng được cung cấp từ đầu vào bên ngoài. Điều này có thể khiến code của bạn dễ bị tấn công object injection.

Tên thuộc tính

Mỗi tên thuộc tính là một chuỗi hoặc một Symbol. Bất kỳ giá trị nào khác, bao gồm cả số, sẽ bị ép kiểu thành chuỗi. Đoạn này in ra 'value', vì 1 bị ép kiểu thành '1'.

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

Đoạn này cũng in ra 'value', vì cả foo và bar đều được chuyển đổi thành cùng một chuỗi ("[object Object]").

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

Ràng buộc phương thức

Thông thường khi nói về thuộc tính của đối tượng, người ta phân biệt giữa thuộc tính và phương thức. Tuy nhiên, sự phân biệt thuộc tính/phương thức chỉ là một quy ước. Phương thức là một thuộc tính có thể được gọi (ví dụ, nếu nó có tham chiếu đến một instance Function làm giá trị).

Một phương thức không bị ràng buộc với đối tượng mà nó là thuộc tính của. Cụ thể, this không cố định trong một phương thức và không nhất thiết phải tham chiếu đến đối tượng chứa phương thức. Thay vào đó, this được "truyền" bởi lời gọi hàm. Xem tham chiếu cho this.

Ví dụ

Ký hiệu ngoặc vuông so với eval()

Người mới học JavaScript thường mắc lỗi sử dụng eval() khi ký hiệu ngoặc vuông có thể được dùng thay thế.

Ví dụ, cú pháp sau thường được thấy trong nhiều script.

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

eval() chậm và nên tránh dùng bất cứ khi nào có thể. Ngoài ra, strFormControl phải giữ một định danh, điều này không bắt buộc đối với tên và id của form control. Tốt hơn là nên dùng ký hiệu ngoặc vuông:

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

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Object
• Object.defineProperty()
• Optional chaining (?.)