From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../operators/object_initializer/index.html | 431 +++++++++++++++++++++ 1 file changed, 431 insertions(+) create mode 100644 files/ru/web/javascript/reference/operators/object_initializer/index.html (limited to 'files/ru/web/javascript/reference/operators/object_initializer') diff --git a/files/ru/web/javascript/reference/operators/object_initializer/index.html b/files/ru/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..c7172a0c03 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,431 @@ +--- +title: Инициализация объектов +slug: Web/JavaScript/Reference/Operators/Object_initializer +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Операторы")}}
+ +

Объекты могут быть инициализированы с помощью 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'
+};
+ +

Описание

+ +

Инициализатор объекта это выражение, которое описывает инициализацию {{jsxref("Object")}}. Объекты состоят из свойств, которые используются для описания объекта. Значения свойств объектов могут содержать как {{Glossary("примитивные")}} типы данных, так и другие объекты.

+ +

Создание объектов

+ +

Пустой объект без свойств может быть создан следующим образом:

+ +
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, повторение имен свойств будет воспринято как {{jsxref("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) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем  {{jsxref("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 }
+ +

Заметьте, что {{jsxref("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). Хотя они и выглядят аналогично, существует разница между ними:

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}initial definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter and setter added.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Shorthand method/property names and computed property names added.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript DraftStage 3 draft.
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}111
Computed property names{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}347.1
Shorthand property names{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}349
Shorthand method names{{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}349
Spread properties{{CompatChrome(60)}}{{CompatNo}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Computed property names{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}347.1{{CompatNo}}
Shorthand property names{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}349{{CompatNo}}
Shorthand method names{{CompatNo}}{{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}349{{CompatChrome(42.0)}}
Spread properties{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf