Доступ до властивостей

Оператори доступу до властивостей надають доступ до властивостей об'єкта за допомогою крапкової або дужкової нотації.

Синтаксис

object.property
object['property']

Опис

Можна сприймати об'єкт як асоціативний масив (також відомий як словник, мапа, хеш, таблиця пошуку). Ключами у цьому масиві є імена властивостей об'єкта. Говорячи про властивості об'єкта, прийнято розрізняти властивості та методи. Однак, це розрізнення є не більше, ніж конвенцією. Метод - це просто властивість, яку можна викликати, наприклад, якщо вона має посилання на екземпляр функції в якості значення.

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

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

get = object.property;
object.property = set;

У цьому коді property має бути коректним ідентифікатором JavaScript . Наприклад, ідентифікатор object.$1 коректний, а object.1 ні.

document.createElement('pre');

Тут метод на ім'я "createElement" отримується з об'єкта document і викликається.

Якщо ви використовуєте метод для числового літералу, і числовий літерал не має показника степеня чи десяткової крапки, залиште пробільний символ(и) перед крапкою, що передує виклику методу, щоб крапка не була інтерпретована як десятковий розділювач.

77 .toExponential();
// або
77
.toExponential();
// або
(77).toExponential();
// або
77..toExponential();
// або
77.0.toExponential();
// тому що 77. === 77.0, неоднозначності немає

Дужкова нотація

get = object[property_name];
object[property_name] = set;

property_name - це рядок або символ. Він не мусить бути коректним ідентифікатором; він може мати будь-яке значення, наприклад, "1foo", "!bar!", чи навіть " " (пробіл).

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

Цей код виконує абсолютно те саме, що й попередній приклад.

Перед дужковим позначенням дозволені пробіли.

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

Імена властивостей

Імена властивостей можуть бути рядком або символом. Будь-яке інше значення, в тому числі числове, примусово приводиться до рядка.

var object = {};
object['1'] = 'значення';
console.log(object[1]);

Цей код виводить "значення", оскільки 1 перетворюється у '1'.

var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'значення';
console.log(object[bar]);

Цей код також виведе "значення", оскільки і foo, і bar перетворюються у один і той самий рядок. У рушії JavaScript SpiderMonkey цей рядок дорівнював би "[object Object]".

Прив'язка методу

Метод не прив'язаний того до об'єкта, чиїм методом він є. Зокрема, значення this не зафіксоване у методі, тобто, this не обов'язково вказує на об'єкт, який містить цей метод. Замість цього, this "передається" викликом функції. Дивіться метод bind.

Заувага щодо eval

Новачки у JavaScript часто роблять помилку, використовуючи eval() там, де можна використати дужкову нотацію. Наприклад, наступний синтаксис можна зустріти у багатьох скриптах.

x = eval('document.forms.form_name.elements.' + strFormControl + '.value');

Функція eval() повільна, її бажано уникати, де це можливо. Також, змінна strFormControl мала б містити ідентифікатор, що не є обов'язковим для імен та ID елементів форми. Краще використовувати дужкову нотацію:

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

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

Специфікація Статус Коментар
ECMAScript Latest Draft (ECMA-262)
The definition of 'Property Accessors' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard
ECMAScript 5.1 (ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard
ECMAScript 1st Edition (ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard Початкове визначення. Реалізоване у JavaScript 1.0.

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Property accessorsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0nodejs Full support Yes

Legend

Full support  
Full support

Див. також