diff options
Diffstat (limited to 'files/pl/web/javascript/reference/operators/object_initializer')
-rw-r--r-- | files/pl/web/javascript/reference/operators/object_initializer/index.html | 387 |
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> |