diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
| commit | de5c456ebded0e038adbf23db34cc290c8829180 (patch) | |
| tree | 2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/web/javascript/referencje/operatory/object_initializer | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2 translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip | |
unslug pl: move
Diffstat (limited to 'files/pl/web/javascript/referencje/operatory/object_initializer')
| -rw-r--r-- | files/pl/web/javascript/referencje/operatory/object_initializer/index.html | 387 |
1 files changed, 0 insertions, 387 deletions
diff --git a/files/pl/web/javascript/referencje/operatory/object_initializer/index.html b/files/pl/web/javascript/referencje/operatory/object_initializer/index.html deleted file mode 100644 index 4148cc07d1..0000000000 --- a/files/pl/web/javascript/referencje/operatory/object_initializer/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -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> |
