Property accessors

Доступ к свойствам объекта можно получить, используя точечную и скобочную записи.

Интерактивный пример

Синтаксис

object.property
object["property"]

Описание

Можно думать об объекте как об ассоциативном массиве (или карте, словаре, хэш-таблице, таблице поиска). Ключи в таком массиве - это имена свойств объекта.

Когда речь идёт о свойствах объекта, обычно различают собственно свойства и методы. Однако разделение свойство/метод это не более чем условность. Метод - это просто свойство, которое можно вызвать (например, если оно содержит ссылку на функцию в качестве значения.

Есть два способа доступа к свойствам: точечная и скобочная записи.

Точечная запись

В записи object.property, property должно быть действительным идентификатором. (В стандарте ECMAScript, имена свойств технически называются "IdentifierNames", а не "Identifiers", поэтому зарезервированные слова могут быть использованы в их качестве, но это не рекомендуется). Например, object.$1 является верной записью, а object.1 - нет.

js
const variable = object.property_name;

object.property_name = value;
js
const object = {};

object.$1 = 'foo';
console.log(object.$1);  // 'foo'

object.1 = 'bar';        // SyntaxError
console.log(object.1);   // SyntaxError

Здесь метод с именем createElement считывается с объекта document и вызывается.

js
document.createElement("pre");

Если вы хотите вызвать метод на численном литерале, не имеющий части с экспонентой или точки, отделяющей дробную часть, нужно ставить пробел перед точкой, являющейся частью обращения к этому методу, чтобы интерпретатор не посчитал, что это точка отделяет дробную часть числа (или использовать другие способы этого избежать).

js
// SyntaxError, здесь считается, что 77. это число,
// поэтому такая запись эквивалентна (77.)toExponentional()
// что является ошибкой
77.toExponentional()
// Рабочие варианты:
77.toExponential()
77
.toExponential()
;(77).toExponential()
// Здесь первая точка относится к числу, вторая вызывает метод
// то есть эта запись равносильна (77.).toExponential()
77..toExponential()
// Эквивалентно (77.0).toExponential()
77.0.toExponential()

Скобочная запись

В записи object[property_name], property_name - это выражение, вычисляющееся в строку или символ. Это может быть любая строка, не обязательно действительный идентификатор, например '1foo', '!bar!' или даже ' ' (пробел).

js
const variable = object[property_name];
object[property_name] = value;

Пример, аналогичный примеру в предыдущем пункте:

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

Пробел перед скобкой допускается:

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

Имена свойств

Имена свойств могут быть строками или символами. Любое другое значение приводится к строке. Следующий код выводит 'value', поскольку число 1 приводится к строке '1'.

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

Этот пример также выводит 'value', так как и foo, и bar приводятся к одной и той же строке.

js
const foo = { unique_prop: 1 };
const bar = { unique_prop: 2 };
const object = {};

object[foo] = "value";
console.log(object[bar]);

В движке SpiderMonkey JavaScript это строка '[object Object]'.

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

Метод не привязан к содержащему его объекту. Это значит, что значение this в методах объекта не всегда указывает на него. Вместо этого, this "передаётся" при вызове метода. Смотрите подробнее this.

Примеры

Скобочная запись или eval

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

Например, следующий синтаксис можно часто увидеть в скриптах.

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

Функция eval() очень медленная и её использования следует избегать, когда это возможно. Кроме того, строка strFormControl при таком использовании обязаны содержать действительный идентификатор, что не является обязательным для id полей формы, то есть, например, поле с id 1 не получится получить такой записью. Лучше вместо этого использовать скобочную запись:

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

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

Specification
ECMAScript Language Specification
# sec-property-accessors

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также