Аксесори властивостей

Аксесори властивостей надають доступ до властивостей об'єкта за допомогою крапки (крапкова нотація) і квадратних дужок (дужкова нотація).

Спробуйте його в дії

Синтаксис

object.propertyName
object[expression]

Опис

Можна розглядати об'єкт як асоціативний масив (він же відображення, словник, геш, таблиця пошуку). Ключами в такому масиві є імена властивостей об'єкта.

Є два варіанти доступу до властивостей: крапкова нотація та дужкова нотація.

Крапкова нотація

propertyName у синтаксисі object.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();
// або
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"] і повертає "Міхал"

А проте, стережіться використання квадратних дужок для звертання до властивостей, назви яких прийшли зовні. Вони можуть зробити код сприйнятливим до атак втручання в об'єкти.

Назви властивостей

Назва кожної властивості є рядком або символом. Будь-яке інше значення, включно з числом, зводиться до рядка. Наступний код виведе '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;

Специфікації

Сумісність із браузерами

desktop mobile server
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet Deno Node.js
Property accessors
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 4
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Deno Full support 1.0
Node.js Full support 0.10.0

Дивіться також