aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/javascript/reference/operators/object_initializer
diff options
context:
space:
mode:
Diffstat (limited to 'files/pl/web/javascript/reference/operators/object_initializer')
-rw-r--r--files/pl/web/javascript/reference/operators/object_initializer/index.html387
1 files changed, 387 insertions, 0 deletions
diff --git a/files/pl/web/javascript/reference/operators/object_initializer/index.html b/files/pl/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..4148cc07d1
--- /dev/null
+++ b/files/pl/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,387 @@
+---
+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>