Объекты могут быть инициализированы с помощью new Object()
, Object.create()
или литеральной (инициирующей) нотации. Инициализатор объекта это разделенный запятыми список ноль или более пар имен свойств и ассоциируемых с ними значений, заключенных в фигурные скобки ({}
).
Синтаксис
var o = {};
var o = {a: 'foo', b: 42, c: {}};
var a = 'foo', b = 42, c = {};
var o = {a: a, b: b, c: c};
var o = {
property: function ([parameters]) {},
get property() {},
set property(value) {}
};
Новая нотация в ECMAScript 2015
Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.
// Сокращение имен свойств (ES2015)
var a = 'foo', b = 42, c = {};
var o = {a, b, c};
// Сокращение имен методов (ES2015)
var o = {
property([parameters]) {}
};
// Вычисление имен свойств (ES2015)
var prop = 'foo';
var o = {
[prop]: 'hey',
['b' + 'ar']: 'there'
};
Описание
Инициализатор объекта это выражение, которое описывает инициализацию Object
. Объекты состоят из свойств, которые используются для описания объекта. Значения свойств объектов могут содержать как примитивные типы данных, так и другие объекты.
Создание объектов
Пустой объект без свойств может быть создан следующим образом:
var object = {};
Однако, преимущество литеральной или инициирующей нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создается простой список пар ключ: значение
, разделенных запятой. Следующий код создает объект с тремя парами значений и ключи это "foo"
, "age"
и "baz"
. Значения этих ключей строка "bar"
, число 42
и другой объект.
var object = {
foo: 'bar',
age: 42,
baz: {myProp: 12}
}
Доступность свойств
После того, как создали объект, вы, вероятно, захотите прочитать или изменить его. Свойства объектов могут быть получены при помощи точечной нотации или квадратных скобок. Смотрите property accessors для детальной информации.
object.foo; // "bar"
object['age']; // 42
object.foo = 'baz';
Определение свойств
Мы уже рассмотрели, как объявить свойства, используя синтаксис инициализации. Зачастую, в коде появляются свойства, которые вы захотите поместить в объект. Вы увидете следующий код:
var a = 'foo',
b = 42,
c = {};
var o = {
a: a,
b: b,
c: c
};
С ECMAScript 2015 появилась короткая нотация, способная достичь того же:
var a = 'foo',
b = 42,
c = {};
// Сокращение имен свойств (ES2015)
var o = {a, b, c};
// Иначе говоря,
console.log((o.a === {a}.a)); // true
Повторение имен свойств
Когда используются одинаковые имена свойств, второе свойство перезапишет первое.
var a = {x: 1, x: 2};
console.log(a); // {x: 2}
В строгом режиме ECMAScript 5, повторение имен свойств будет воспринято как SyntaxError
. С введением вычисляемых имен свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.
function haveES2015DuplicatePropertySemantics() {
'use strict';
try {
({prop: 1, prop: 2});
// Не будет ошибки, повторение имен доступно в строгом режиме
return true;
} catch(e) {
// Будет ошибка, дубликаты запрещены в строгом режиме
return false;
}
}
Описание методов
Свойство объекта также может ссылаться на function, getter или setter.
var o = {
property: function ([parameters]) {},
get property() {},
set property(value) {}
};
В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.
// Сокращение имен методов (ES2015)
var o = {
property([parameters]) {},
*generator() {}
};
В ECMAScript 2015 есть способ кратко объявить свойства, чьими значениями являются генераторы функций:
var o = {
*generator() {
...........
}
};
Что эквивалентно следующей ES5-подобной нотации (но отметьте, что ECMAScript 5 не содержит генераторов):
var o = {
generator: function* () {
...........
}
};
Для большей информации и примеров смотри method definitions.
Вычисляемые имена свойств
Начиная с ECMAScript 2015, синтаксис объявления объектов также поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки []
выражение, которое будет вычислено, как имя свойства. Это похоже на скобочную нотацию синтаксиса property accessor, которую вы, вероятно, уже использовали, чтобы прочитать и задать свойство. Теперь можно использовать аналогичный способ с литеральными объектами:
// Вычисляемое имя свойства (ES2015)
var i = 0;
var a = {
['foo' + ++i]: i,
['foo' + ++i]: i,
['foo' + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
var param = 'size';
var config = {
[param]: 12,
['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};
console.log(config); // {size: 12, mobileSize: 4}
Spread-свойства
Rest/Spread свойство ECMAScript предлагает (stage 3) добавлять spread свойства в литеральную нотацию. Оно копирует собственные перечисляемые свойства из представленного объекта в новый.
Поверхностное копирование (исключая prototype) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем Object.assign()
.
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Объект { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Объект { foo: "baz", x: 42, y: 13 }
Заметьте, что Object.assign()
вызывает setters, тогда как оператор spread нет.
Изменение Prototype
Объявление свойства в виде __proto__: value
или "__proto__": value
не создаст свойства с именем __proto__
. Вместо этого, если предоставляемое значение объект или null
, оно заменит [[Prototype]]
создаваемого объекта на это значение. (Если значение не объект или null, объект не изменится.)
var obj1 = {};
assert(Object.getPrototypeOf(obj1) === Object.prototype);
var obj2 = {__proto__: null};
assert(Object.getPrototypeOf(obj2) === null);
var protoObj = {};
var obj3 = {'__proto__': protoObj};
assert(Object.getPrototypeOf(obj3) === protoObj);
var obj4 = {__proto__: 'not an object or null'};
assert(Object.getPrototypeOf(obj4) === Object.prototype);
assert(!obj4.hasOwnProperty('__proto__'));
Только одно изменение prototype разрешено через литеральное объявление объекта: несколько изменений prototype вызовут синтаксическую ошибку.
Объявление свойства не через "двоеточие" не изменит знаения prototype: это описание будет выглядеть идентично такому же объявлению свойства с использованием любого другого имени.
var __proto__ = 'variable';
var obj1 = {__proto__};
assert(Object.getPrototypeOf(obj1) === Object.prototype);
assert(obj1.hasOwnProperty('__proto__'));
assert(obj1.__proto__ === 'variable');
var obj2 = {__proto__() { return 'hello'; }};
assert(obj2.__proto__() === 'hello');
var obj3 = {['__prot' + 'o__']: 17};
assert(obj3.__proto__ === 17);
Литеральная нотация vs JSON
Литеральная нотация не то же самое, что и JavaScript Object Notation (JSON). Хотя они и выглядят аналогично, существует разница между ними:
- JSON позволяет объявление свойств только с помощью синтаксиса
"property": value
. Имя свойства должно быть заключено в двойные кавычки и объявление не может быть сокращено. - В JSON значения могут быть только строками, числами, массивами,
true
,false
,null
или другими (JSON) объектами. - Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.
- Объект вида
Date
будет строкой послеJSON.parse()
. JSON.parse()
отклонит вычисляемые имена свойств и вернет ошибку.
Спецификации
Specification | Status | Comment |
---|---|---|
ECMAScript 1st Edition (ECMA-262) | Стандарт | initial definition. |
ECMAScript 5.1 (ECMA-262) Определение 'Object Initializer' в этой спецификации. |
Стандарт | getter and setter added. |
ECMAScript 2015 (6th Edition, ECMA-262) Определение 'Object Initializer' в этой спецификации. |
Стандарт | Shorthand method/property names and computed property names added. |
ECMAScript (ECMA-262) Определение 'Object Initializer' в этой спецификации. |
Живой стандарт | |
Rest/Spread Properties for ECMAScript | Draft | Stage 3 draft. |
Поддержка браузерами
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Да) | 1.0 (1.7 или ранее) | 1 | 1 | 1 |
Computed property names | (Да) | (Да) | 34 (34) | Нет | 34 | 7.1 |
Shorthand property names | (Да) | (Да) | 33 (33) | Нет | 34 | 9 |
Shorthand method names | 42.0 | (Да) | 34 (34) | Нет | 34 | 9 |
Spread properties | 60 | Нет | 55 (55) | Нет | Нет | Нет |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | (Да) | (Да) | (Да) | 1.0 (1.0) | 1 | 1 | 1 | 1.0 |
Computed property names | Нет | (Да) | (Да) | 34.0 (34) | Нет | 34 | 7.1 | Нет |
Shorthand property names | Нет | (Да) | (Да) | 33.0 (33) | Нет | 34 | 9 | Нет |
Shorthand method names | Нет | 42.0 | (Да) | 34.0 (34) | Нет | 34 | 9 | 42.0 |
Spread properties | Нет | Нет | Нет | 55.0 (55) | Нет | Нет | Нет | Нет |