path: root/files/ru/web/javascript/reference/operators/object_initializer/index.html

---
title: Инициализация объектов
slug: Web/JavaScript/Reference/Operators/Object_initializer
translation_of: Web/JavaScript/Reference/Operators/Object_initializer
---
<div>{{JsSidebar("Операторы")}}</div>

<p>Объекты могут быть инициализированы с помощью <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> </code>или <em>литеральной</em> (<em>инициирующей</em>) нотации. Инициализатор объекта это разделённый запятыми список ноль или более пар имён свойств и ассоциируемых с ними значений, заключённых в фигурные скобки (<code>{}</code>).</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: js">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 = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {}
};
</pre>

<h3 id="Новая_нотация_в_ECMAScript_2015">Новая нотация в ECMAScript 2015</h3>

<p>Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.</p>

<pre class="brush: js">// Сокращение имён свойств (ES2015)
var a = 'foo', b = 42, c = {};
var o = {a, b, c};

// Сокращение имён методов (ES2015)
var o = {
  <var>property</var>([<var>parameters</var>]) {}
};

// Вычисление имён свойств (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};</pre>

<h2 id="Описание">Описание</h2>

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

<h3 id="Создание_объектов">Создание объектов</h3>

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

<pre class="brush: js">var object = {};</pre>

<p>Однако, преимущество <em>литеральной</em> или <em>инициирующей</em> нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создаётся простой список пар <code>ключ: значение</code>, разделённых запятой. Следующий код создаёт объект с тремя парами значений и ключи это <code>"foo"</code>, <code>"age"</code> и <code>"baz"</code>. Значения этих ключей строка <code>"bar"</code>, число <code>42</code> и другой объект.</p>

<pre class="brush: js">var object = {
  foo: 'bar',
  age: 42,
  baz: {myProp: 12}
}</pre>

<h3 id="Доступность_свойств">Доступность свойств</h3>

<p>После того, как создали объект, вы, вероятно, захотите прочитать или изменить его. Свойства объектов могут быть получены при помощи точечной нотации или квадратных скобок. Смотрите <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> для детальной информации.</p>

<pre class="brush: js">object.foo; // "bar"
object['age']; // 42

object.foo = 'baz';
</pre>

<h3 id="Определение_свойств">Определение свойств</h3>

<p>Мы уже рассмотрели, как объявить свойства, используя синтаксис инициализации. Зачастую, в коде появляются свойства, которые вы захотите поместить в объект. Вы увидите следующий код:</p>

<pre class="brush: js">var a = 'foo',
    b = 42,
    c = {};

var o = {
  a: a,
  b: b,
  c: c
};</pre>

<p>С ECMAScript 2015 появилась короткая нотация, способная достичь того же:</p>

<pre class="brush: js">var a = 'foo',
    b = 42,
    c = {};

// Сокращение имён свойств (ES2015)
var o = {a, b, c};

// Иначе говоря,
console.log((o.a === {a}.a)); // true
</pre>

<h4 id="Повторение_имён_свойств">Повторение имён свойств</h4>

<p>Когда используются одинаковые имена свойств, второе свойство перезапишет первое.</p>

<pre class="brush: js">var a = {x: 1, x: 2};
console.log(a); // {x: 2}
</pre>

<p>В строгом режиме ECMAScript 5, повторение имён свойств будет воспринято как {{jsxref("SyntaxError")}}.  С введением вычисляемых имён свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.</p>

<pre class="brush: js">function haveES2015DuplicatePropertySemantics() {
  'use strict';
  try {
    ({prop: 1, prop: 2});

    // Не будет ошибки, повторение имён доступно в строгом режиме
    return true;
  } catch(e) {
    // Будет ошибка, дубликаты запрещены в строгом режиме
    return false;
  }
}</pre>

<h3 id="Описание_методов">Описание методов</h3>

<p>Свойство объекта также может ссылаться на <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>

<pre class="brush: js">var o = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {}
};</pre>

<p>В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.</p>

<pre class="brush: js">// Сокращение имён методов (ES2015)
var o = {
  <var>property</var>([<var>parameters</var>]) {},
  *<var>generator</var>() {}
};</pre>

<p>В ECMAScript 2015 есть способ кратко объявить свойства, чьими значениями являются генераторы функций:</p>

<pre class="brush: js">var o = {
  *<var>generator</var>() {
    ...........
  }
};</pre>

<p>Что эквивалентно следующей ES5-подобной нотации (но отметьте, что  ECMAScript 5 не содержит генераторов):</p>

<pre class="brush: js">var o = {
  generator<var>: function* </var>() {
    ...........
  }
};</pre>

<p>Для большей информации и примеров смотри <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>

<h3 id="Вычисляемые_имена_свойств">Вычисляемые имена свойств</h3>

<p>Начиная с ECMAScript 2015, синтаксис объявления объектов также поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки <code>[] </code>выражение, которое будет вычислено, как имя свойства. Это похоже на скобочную нотацию синтаксиса <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a>, которую вы, вероятно, уже использовали, чтобы прочитать и задать свойство. Теперь можно использовать аналогичный способ с литеральными объектами:</p>

<pre class="brush: js">// Вычисляемое имя свойства (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}</pre>

<h3 id="Spread-свойства">Spread-свойства</h3>

<p><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread свойство ECMAScript</a> предлагает (stage 3) добавлять <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread</a> свойства в литеральную нотацию. Оно копирует собственные перечисляемые свойства из представленного объекта в новый.</p>

<p>Поверхностное копирование (исключая prototype) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем  {{jsxref("Object.assign()")}}.</p>

<pre class="brush: js">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 }</pre>

<p>Заметьте, что {{jsxref("Object.assign()")}} вызывает <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>, тогда как оператор spread нет.</p>

<h3 id="Изменение_Prototype">Изменение Prototype</h3>

<p>Объявление свойства в виде <code>__proto__: value</code> или <code>"__proto__": value</code> не создаст свойства с именем <code>__proto__</code>.  Вместо этого, если предоставляемое значение объект или <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, оно заменит <code>[[Prototype]]</code> создаваемого объекта на это значение.  (Если значение не объект или null, объект не изменится.)</p>

<pre class="brush: js">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__'));
</pre>

<p>Только одно изменение prototype разрешено через литеральное объявление объекта: несколько изменений prototype вызовут синтаксическую ошибку.</p>

<p>Объявление свойства не через "двоеточие" не изменит значения prototype: это описание будет выглядеть идентично такому же объявлению свойства с использованием любого другого имени.</p>

<pre class="brush: js">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);
</pre>

<h2 id="Литеральная_нотация_vs_JSON">Литеральная нотация vs JSON</h2>

<p>Литеральная нотация не то же самое, что и  <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). Хотя они и выглядят аналогично, существует разница между ними:</p>

<ul>
 <li>JSON позволяет объявление свойств <em>только</em> с помощью синтаксиса <code>"property": value</code>.  Имя свойства должно быть заключено в двойные кавычки и объявление не может быть сокращено.</li>
 <li>В JSON значения могут быть только строками, числами, массивами, <code>true</code>, <code>false</code>, <code>null</code> или другими (JSON) объектами.</li>
 <li>Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.</li>
 <li>Объект вида {{jsxref("Date")}} будет строкой после {{jsxref("JSON.parse()")}}.</li>
 <li>{{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернёт ошибку.</li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Shorthand method/property names and computed property names added.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td>
   <td>Draft</td>
   <td>Stage 3 draft.</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>1</td>
   <td>1</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
  </tr>
  <tr>
   <td>Spread properties</td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("55")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>1</td>
   <td>1</td>
   <td>1</td>
   <td>{{CompatChrome(1.0)}}</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>7.1</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
  <tr>
   <td>Spread properties</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("55")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
</ul>