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

---
title: Inicjalizator obiektu
slug: Web/JavaScript/Referencje/Operatory/Object_initializer
translation_of: Web/JavaScript/Reference/Operators/Object_initializer
---
<div>{{JsSidebar("Operators")}}</div>

<p>Obiekty można tworzyć używając <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>, bądź wykorzystując notację literałową (notację <em>inicializacyjną</em>). Inicjalizator obiektu to lista zera lub więcej par - nazw właściwości oraz ich wartości - otoczonych nawiasami klamrowymi (<code>{}</code>).</p>

<h2 id="Składnia">Składnia</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>wlasciwosc: function </var>([<var>parametry</var>]) {},
  get <var>wlasciwosc</var>() {},
  set <var>wlasciwosc</var>(<var>wartosc</var>) {},
};
</pre>

<h3 id="Nowe_notacje_w_ECMAScript_2015">Nowe notacje w ECMAScript 2015</h3>

<p>Pamiętaj aby zapoznać się z tabelą kompatybilności. Środowiska nie obsługujące tych notacji będą wyrzucać błędy składni.</p>

<pre class="brush: js">// Skrótowe nazwy właściwości (ES6)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

// Skrótowe nazwy metod (ES6)
var o = {
  <var>wlasciwosc</var>([<var>parametry</var>]) {},
  get <var>wlasciwosc</var>() {},
  set <var>wlasciwosc</var>(<var>wartosc</var>) {},
  * <var>generator</var>() {}
};

// Obliczone nazwy właściwości (ES6)
var nazwa = "foo";
var o = {
  [nazwa]: "dzien",
  ["b" + "ar"]: "dobry",
};</pre>

<h2 id="Opis">Opis</h2>

<p>Inicjalizator obiektu to wyrażenie opisujące inicjalizację obiektu {{jsxref("Object")}}. Obiekty składają się z <em>właściwości</em> używanych do opisywania obiektu. Wartości tych właściwości mogą zawierać {{Glossary("primitive")}} typy danych albo inne obiekty.</p>

<h3 id="Tworzenie_obiektów">Tworzenie obiektów</h3>

<p>Pusty obiekt możemy stworzyć w taki sposób:</p>

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

<p>Jednak prawdziwą przewagą notacji literałowej jest możliwość tworzenia w szybki sposób obiektów ze zdefiniowanymi od razu właściwościami. Wystarczy wypisać listę kluczy: wartości odzdzielonych dwukropkiem. Poniższy przykład tworzy obiekt <code>osoba</code> z trzema właściwościami: "<code>imie</code>", "<code>wiek</code>" i "<code>wyglad</code>". Ich wartościami jest string "<code>Adam</code>", numer <code>42</code> oraz inny obiekt.</p>

<pre class="brush: js">var osoba =
{
  imie: "Adam",
  wiek: 42,
  wyglad: { wzrost: 179 },
}</pre>

<h3 id="Dostęp_do_właściwości">Dostęp do właściwości</h3>

<p>Kiedy już stworzyłeś obiekt, możesz chcieć zobaczyć lub zmienić jego właściwości. Można zrobić to używając zapisu z kropką lub nawiasami. Zajrzyj do <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_pamięci">operatorów pamięci</a> po więcej informacji.</p>

<pre class="brush: js">object.imie; // "Adam"
object["wiek"]; // 42

object.imie = "Ewa";
</pre>

<h3 id="Definiowanie_właściwości">Definiowanie właściwości</h3>

<p>Nauczyliśmy się już jak zapisywać właściwości używając notacji literałowej. Czasami jednak mamy w kodzie zmienne, które chcielibyśmy dodać do naszego obiektu. Możemy to zrobić w taki sposób:</p>

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

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

<p>Ale ECMAScript 2015 oddaje nam do dyspozycji krótszy zapis, pozwalający uzyskać ten sam efekt:</p>

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

// Skrótowe nazwy właściwości (ES6)
var o = { a, b, c };</pre>

<h4 id="Duplikowanie_nazw_właściwości">Duplikowanie nazw właściwości</h4>

<p>W momencie, gdy użyjemy już istniejącej nazwy właściwości jej wartość nadpisze tę poprzednią.</p>

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

<p>W ECMAScript 5 <em>strict mode,</em> duplikowanie nazw właściwości było postrzegane jako {{jsxref("SyntaxError")}}. Zmieniono to jednak po wprowadzeniu obliczanych nazw właściwości. Duplikacja stała się wówczas możliwa podczas wykonywania kodu, dlatego też w ECMAScript 2015 usunięto tę rystrykcję.</p>

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

    // Nie wyrzucono błędu, duplikacja dozwolona w <em>strict mode</em>.
    return true;
  }
  catch (e)
  {
    // Wyrzucono błąd, duplikacja w <em>strict mode</em> zabroniona.
    return false;
  }
}</pre>

<h3 id="Definicje_metod">Definicje metod</h3>

<p>Właściwość obiektu może również odnosić się do <a href="pl/docs/Web/JavaScript/Reference/Functions">funkcji</a> albo metody <a href="/pl/docs/Web/JavaScript/Reference/Functions/get">getter</a> lub <a href="/pl/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>

<pre class="brush: js">var o = {
  <var>wlasciwos: function </var>([<var>parametry</var>]) {},
  get <var>wlasciwos</var>() {},
  set <var>wlasciwos</var>(<var>wartosc</var>) {},
};</pre>

<p>w ECMAScript 2015, mamy dostęp do skróconego zapisu, takiego w którym słowo kluczowe "function" nie jest nam już potrzebne.</p>

<pre class="brush: js">// Shorthand method names (ES6)
var o = {
  <var>property</var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
  * <var>generator</var>() {}
};</pre>

<p>W ECMAScript 2015 możemy również w prostszy sposób zapisać właściwość będącą funkcją generatora:</p>

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

<p>W ECMAScript 5 musielibyśmy zapisać to tak (aczkolwiek pamiętaj że w ES5 nie ma generatorów):</p>

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

<p>Po więcej informacji zajrzyj do <a href="/pl/docs/Web/JavaScript/Reference/Functions/Method_definitions">definicji metod</a>.</p>

<h3 id="Obliczone_nazwy_właściwości">Obliczone nazwy właściwości</h3>

<p>Od ECMAScript 2015, składnia inicjalizatora obiektu wspiera także obliczone nazwy właściwości. Umożliwia to umieszczenie wyrażenia w nawiasach <code>[]</code>, które potem zostanie przeliczone na nazwę właściwości. Działa to na tej samej zasadzie co zapis klamrowy w <a href="/pl/docs/Web/JavaScript/Reference/Operators/Property_Accessors">operatorach pamięci</a>, z którymi zapewne miałeś już styczność. Teraz możemy użwać tej samej składni w notacji literałowej:</p>

<pre class="brush: js">// Obliczone nazwy właściwości (ES6)
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 = 'typ';
var info = {
  [param]: 'strona',
  ["pod" + param.charAt(0).toUpperCase() + param.slice(1)]: 'forum'
};

console.log(info); // { typ: 'strona', 'podTyp': 'forum' }</pre>

<h3 id="Zmiana_prototypu">Zmiana prototypu</h3>

<p>Definicja właściwości w formie <code>__proto__: wartosc</code> albo <code>"__proto__": wartosc</code> nie stworzy właściwości z nazwą <code>__proto__</code>. Zamiast tego, jeżeli podana wartość jest obiektem lub typem <code>null</code>, zamieni ona <code>[[Prototype]]</code> tworzonego obiektu na podaną wartość. (Jeżeli wartość nie jest ani obiektem ani typem <code>null</code> prototyp nie zostanie zmieniony.)</p>

<pre class="brush: js">var obj1 = {};
console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true

var obj2 = { __proto__: null };
console.log(Object.getPrototypeOf(obj2) === null); // true

var protoObj = {};
var obj3 = { "__proto__": protoObj };
console.log(Object.getPrototypeOf(obj3) === protoObj); // true

var obj4 = { __proto__: "not an object or null" };
console.log(Object.getPrototypeOf(obj4) === Object.prototype); // true
console.log(!obj4.hasOwnProperty("__proto__")); // true
</pre>

<p>Podczas notacji literałowej możemy zmienić prototyp tylko raz, kolejne próby będą skutkować błędami składni.</p>

<p>Jeżeli użyjemy w defninicji nazwy <code>__proto__</code> bez używania składni z dwukropkiem, nazwa ta będzie się zachowywać jak kazda inna.</p>

<pre class="brush: js">var __proto__ = "wartosc";

var obj1 = { __proto__ };
console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true
console.log(obj1.hasOwnProperty("__proto__")); // true
console.log(obj1.__proto__ === "wartosc"); // true

var obj2 = { __proto__() { return "witaj"; } };
console.log(obj2.__proto__() === "witaj"); // true

var obj3 = { ["__prot" + "o__"]: 17 };
console.log(obj3.__proto__ === 17); // true
</pre>

<h2 id="Notacja_literałowa_vs_JSON">Notacja literałowa vs JSON</h2>

<p>Notacja literałowa to nie to samo co <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/pl/docs/Glossary/JSON">JSON</a>). Pomimo, że wyglądają podobnie, są miedzy nimi poważne różnice:</p>

<ul>
 <li>JSON dopuszcza tylko składnie <code>"wlasnosc": wartosc</code>.  Nazwa własności musi być w cudzysłowie, a defnicja nie może być skrócona.</li>
 <li>W JSON wartościami moga być tylko string'i, liczby, tablice, <code>true</code>, <code>false</code>, <code>null</code>, lub inny obiekt JSON.</li>
 <li>Funkcja nie może być przypisana do wartości w JSON.</li>
 <li>Obiekty jak {{jsxref("Date")}} zostaną zamienione na string po użyciu {{jsxref("JSON.parse()")}}.</li>
 <li>{{jsxref("JSON.parse()")}} odrzuni obliczone nazwy zmiennych oraz wyrzuci błąd.</li>
</ul>

<h2 id="Specyfikacje">Specyfikacje</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>Początkowa definicja.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Dodano metody <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> oraz <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Skrócone nazwy właściwości/metod oraz obliczone nazwy właściwości.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</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>{{CompatGeckoDesktop("1.0")}}</td>
   <td>1</td>
   <td>1</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatGeckoDesktop("34")}}</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>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>{{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>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Zobacz_również">Zobacz również</h2>

<ul>
 <li><a href="/pl/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Operatory pamięci</a></li>
 <li><code><a href="/pl/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/pl/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
 <li><a href="/pl/docs/Web/JavaScript/Reference/Functions/Method_definitions">Definicje metod</a></li>
 <li><a href="/pl/docs/Web/JavaScript/Reference/Lexical_grammar">Gramatyka leksykalna</a></li>
</ul>