diff options
Diffstat (limited to 'files/pl/web/javascript/reference/operators')
24 files changed, 4308 insertions, 0 deletions
diff --git a/files/pl/web/javascript/reference/operators/comma_operator/index.html b/files/pl/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..b037dcfdc8 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,37 @@ +--- +title: Operator przecinkowy +slug: Web/JavaScript/Referencje/Operatory/Operator_przecinkowy +tags: + - JavaScript + - Operator + - Przecinek + - Przecinkowy +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<h3 id="Podsumowanie" name="Podsumowanie"></h3> + +<p>Operator przecinkowy wykonuje wszystkie argumenty i zwraca wynik ostatniego argumentu.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><em>wyr1</em>, <em>wyr2, wyr3...</em></pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>wyr1</code>, <code>wyr2, wyr3</code></dt> + <dd>Wyrażenia, z których jedynie ostatnie jest zwracane.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Możemy zastosować operator przecinkowy, kiedy chcemy utworzyć wyrażenie składające się z kilku wyrażeń. Operator przecinkowy jest chyba najczęściej używany w instrukcji pętli for.</p> + +<p>Na przykład, jeśli <code>a</code> jest tablicą dwuwymiarową z 10 elementami w sobie, następujący kod użyje operatora przecinkowego do zwiększenia dwóch zmiennych na raz. Kod wypisze wartości elementów ułożonych po przekątnej w tablicy:</p> + +<pre class="brush: js notranslate">var a = [[]]; +for (var i=0, j=9; i <= 9; i++, j--) + console.log("a["+i+","+j+"]= " + a[i,j]) +</pre> diff --git a/files/pl/web/javascript/reference/operators/conditional_operator/index.html b/files/pl/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..b5b00d0aa1 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,34 @@ +--- +title: Operator warunkowy +slug: Web/JavaScript/Referencje/Operatory/Operator_warunkowy +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator warunkowy jest jedynym operatorem w JavaScript, który pobiera trzy argumenty. Operator jest często stosowany jako skrócenie instrukcji <code>if</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox"><em>warunek</em> ? <em>wyr1</em> : <em>wyr2</em> </pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>warunek</code></dt> + <dd>Wyrażenie, które sprawdza czy warunek jest spełniony (<code>true</code> lub <code>false</code>).</dd> +</dl> + +<dl> + <dt><code>wyr1</code>, <code>wyr2</code></dt> + <dd>Wyrażenia z wartością jakiegoś typu.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Jeśli <code>warunek</code> jest <code>true</code>, operator zwraca wartość <code>wyr1</code>; w przeciwnym razie zwraca wartość <code>wyr2</code>. Na przykład, do wyświetlenia różnych wiadomości opartych na wartości zmiennej <code>isMember</code>, będziesz mógł zastosować poniższą instrukcję:</p> + +<pre>console.log("Opłata wynosi " + (isMember ? "$2.00" : "$10.00")); +console.log("Opłata wynosi " + (zarejestrowany == 1) ? "$2.00" : "$10.00"); +</pre> diff --git a/files/pl/web/javascript/reference/operators/delete/index.html b/files/pl/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..d2a3679804 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,74 @@ +--- +title: Operator delete +slug: Web/JavaScript/Referencje/Operatory/Operator_delete +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator delete usuwa obiekt, własność obiektu lub element w określonym indeksie w tablicy.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">delete <em> nazwaObiektu</em> +</pre> + +<pre class="syntaxbox">delete <em>nazwaObiektu.własność</em> +delete <em>nazwaObiektu</em>['<code><em>własność</em>'</code>] +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwaObiektu</code></dt> + <dd>Nazwa obiektu.</dd> +</dl> + +<dl> + <dt><code>własność</code></dt> + <dd>Własność do usunięcia.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Czwarta forma jest dozwolona tylko wewnątrz instrukcji <code>with</code> w celu usunięcia własności z obiektu.</p> + +<p>Możesz użyć operatora <code>delete</code>, aby usunąć zmienne zadeklarowane bezpośrednio, jednak nie możesz usunąć zmiennych zadeklarowanych za pomocą instrukcji <code>var</code>.</p> + +<p>Jeśli operator <code>delete</code> zadziała prawidłowo, ustawi on własność lub element jako <code>undefined</code> (niezdefiniowany). Operator <code>delete</code> zwraca wartość true (prawda), jeśli operacja jest możliwa, zaś wartość <code>false</code> (fałsz), gdy operacja nie jest możliwa.</p> + +<pre class="brush: js">x = 42; +var y = 43; +myobj = new Number(); +myobj.h = 4; // tworzy własność h +delete x; // zwraca true (można usuwać, jeśli zadeklarowano bezpośrednio) +delete y; // zwraca false (nie można usuwać, jeśli zadeklarowano za pomocą var) +delete Math.PI; // zwraca false (nie można usuwać własności predefiniowanych) +delete myobj.h; // zwraca true (można usuwać własności zdefiniowane przez użytkownika) +delete myobj; // zwraca true (można usuwać obiekty) +</pre> + +<h3 id="Usuwanie_element.C3.B3w_tablicy" name="Usuwanie_element.C3.B3w_tablicy">Usuwanie elementów tablicy</h3> + +<p>Gdy usuwasz element tablicy nie ma to wpływu na jej długość. Na przykład: jeśli usuniesz a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }} będzie wciąż a{{ mediawiki.external(4) }}, natomiast a{{ mediawiki.external(3) }} będzie niezdefiniowane.</p> + +<p>Gdy operator <code>delete</code> usuwa element tablicy, element ten przestaje już w niej istnieć. W poniższym przykładzie drzewa{{ mediawiki.external(3) }} jest usunięte za pomocą <code>delete</code>.</p> + +<pre class="brush: js">drzewa = new Array("sekwoja","wawrzyn","cedr","dąb","klon"); +delete drzewa[3]; +if (3 in drzewa) { + // to nie zostanie wykonane +} +</pre> + +<p>Jeśli chcesz, aby element tablicy nadal istniał, ale posiadał wartość niezdefiniowaną, użyj słowa kluczowego <code>undefined</code> zamiast operatora <code>delete</code>. W poniższym przykładzie, drzewa{{ mediawiki.external(3) }} jest przypisana wartość niezdefiniowana, ale element tablicy nadal istnieje:</p> + +<pre class="brush: js">drzewa = new Array("sekwoja","wawrzyn","cedr","dąb","klon"); +drzewa[3] = undefined; +if (3 in drzewa) { + // to zostanie wykonane +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/javascript/reference/operators/destructuring_assignment/index.html b/files/pl/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..851acea725 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,493 @@ +--- +title: Przypisanie destrukturyzujące +slug: Web/JavaScript/Referencje/Operatory/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Składnia <strong>przypisania destrukturyzującego</strong> jest wyrażeniem w JavaScript, które pozwala na wyciągnięcie danych z tablic bądź obiektów do odrębnych zmiennych.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: js notranslate">var a, b, rest; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5]; +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a:1, b:2}); +console.log(a); // 1 +console.log(b); // 2 + +// ES2016 - nie zaimplementowane w przeglądarce Firefox 47a01 +({a, b, ...rest} = {a:1, b:2, c:3, d:4}); </pre> + +<h2 id="Opis">Opis</h2> + +<p>Wyrażenie literału obiektowego i tablicowego umożliwiają łatwe tworzenie paczek danych <em>ad-hoc</em>. </p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5];</pre> + +<p>Składnia przypisania destrukturyzacyjnego używa podobnej składni, ale z lewej strony przypisania definiujemy, które elementy wyciągnąć ze zmiennej źródłowej.</p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Funkcjonalność ta jest podobna do tych obecnych w językach takich jak Perl i Python.</p> + +<h2 id="Destrukturyzacja_tablic">Destrukturyzacja tablic</h2> + +<h3 id="Podstawowe_przypisanie_zmiennych">Podstawowe przypisanie zmiennych</h3> + +<pre class="brush: js notranslate">var foo = ["one", "two", "three"]; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Przypisanie_oddzielne_od_deklaracji">Przypisanie oddzielne od deklaracji</h3> + +<p>Zmiennej można przypisać wartość poprzez destrukturyzację oddzielnie od deklaracji tej zmiennej.</p> + +<pre class="brush:js notranslate">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Domyślne_wartości">Domyślne wartości</h3> + +<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z tablicy jest niezdefiniowana - <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Zamiana_zmiennych">Zamiana zmiennych</h3> + +<p>Dwie zmienne mogą zamienić się miejscami przy wykorzystaniu jednego wyrażenia destrukturyzującego.</p> + +<p>Bez wyrażenia destrukturyzującego, zamiana zmiennych wymaga zmiennej tymaczasowej (bądź, w niektórych językach niskiego poziomu, tricku <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap</a>).</p> + +<pre class="brush:js notranslate">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="Parsowanie_tablicy_zwróconej_przez_funkcję">Parsowanie tablicy zwróconej przez funkcję</h3> + +<p>Zwrócenie tablicy poprzez funkcję zawsze było możliwe. Destrukturyzacja może sprawić, że praca ze zwróconymi wartościami typu array będzie bardziej zwięzła.</p> + +<p>W tym przykładzie, <code>f()</code> zwraca wartości <code>[1, 2]</code> jako jej wyjście, mogą one być sparsowane w jednej linijce poprzez użycie destrukturyzacji.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Ignorowanie_niektórych_zwróconych_wartości">Ignorowanie niektórych zwróconych wartości</h3> + +<p>Możesz zignorować zwrócone wartości, którymi nie jesteś zainteresowany.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>Możesz także zignorować wszystkie zwrócone wartości:</p> + +<pre class="brush:js notranslate">[,,] = f(); +</pre> + + + +<h3 id="Przypisanie_reszty_tablicy_do_zmiennej">Przypisanie reszty tablicy do zmiennej</h3> + +<p>Podczas destrukturyzacji array'a możesz wypakować i przypisać jego pozostałą część do zmiennej używając operatora reszty:</p> + +<pre class="brush: js notranslate">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Zwróć uwagę, że zostanie wyrzucony {{jsxref("SyntaxError")}} jeśli końcowy przecinek będzie użyty z prawej strony wyrażenia z elementem reszty: </p> + +<pre class="brush: js notranslate">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma</pre> + +<h3 id="Wypakowywanie_wartości_z_wyników_wyrażenia_regularnego">Wypakowywanie wartości z wyników wyrażenia regularnego</h3> + +<p>Gdy metoda wyrażenia regularnego <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> znajdzie pasujący element, zwraca ona tablicę zawierającą kolejno cały string zawierajacy pasujące elementy, a później elementy stringa, które pasowały do każdej grupy wyrażenia regularnego znajdującej się w nawiasach. Wyrażenie destrukturyzujące pozwala na łatwe wypakowanie elementów tej tablicy ignorując pełny string, gdy nie jest on potrzebny. </p> + +<pre class="brush: js notranslate">function parseProtocol(url) { + var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + + var [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"</pre> + +<h2 id="Destrukturyzacja_obiektów">Destrukturyzacja obiektów</h2> + +<h3 id="Podstawowe_przypisanie">Podstawowe przypisanie</h3> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Przypisanie_bez_deklaracji">Przypisanie bez deklaracji</h3> + +<p>Zmiennej można przypisać wartość poprzez destrukturyazację oddzielnie od deklaracji tej zmiennej.</p> + +<pre class="brush:js notranslate">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p>Nawiasy<code>( .. )</code> na krawędziach wyrażenia przypisania są składnią wymaganą podczas używania wyrażenia destrukturyzującego literał obiektowy bez deklaracji.</p> + +<p><code>{a, b} = {a:1, b:2}</code> nie jest poprawną składnią samą w sobie, ponieważ <code>{a, b}</code> z lewej strony wyrażenia jest odbierana jako blok, a nie literał obiektowy.</p> + +<p>Ale już, <code>({a, b} = {a:1, b:2})</code> jest poprawne, tak samo jak <code>var {a, b} = {a:1, b:2}</code></p> +</div> + +<h3 id="Przypisanie_do_nowych_nazw_zmiennych">Przypisanie do nowych nazw zmiennych</h3> + +<p>Zmienna może być wyciągnięta z obiektu i przypisana do zmiennej z inną nazwą niż nazwa właściwości obiektu.</p> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="Wartości_domyślne">Wartości domyślne</h3> + +<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z obiektu jest <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var {a=10, b=5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + + + +<h3 id="Przypisywanie_do_nowych_nazw_zmiennych_i_zapewnienie_wartości_domyślnych">Przypisywanie do nowych nazw zmiennych i zapewnienie wartości domyślnych</h3> + +<p>Właściwość może być zarówno 1) wypakowana z obiektu i przypisana do zmiennej z inną nazwą 2) może być jej przypisana wartość domyślna, gdy wypakowana wartość jest <code>undefined</code>.</p> + +<pre class="brush: js notranslate">var {a:aa = 10, b:bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5</pre> + + + +<h3 id="Ustawianie_domyślnej_wartości_parametru_funkcji">Ustawianie domyślnej wartości parametru funkcji </h3> + +<h4 id="Wersja_ES5">Wersja ES5</h4> + +<pre class="brush: js notranslate">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="Wersja_ES2015_ES6">Wersja ES2015 (ES6)</h4> + +<pre class="brush: js notranslate">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { + console.log(size, cords, radius); + // do some chart drawing +} + +// In Firefox, default values for destructuring assignments are not yet implemented (as described below). +// The workaround is to write the parameters in the following way: +// ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {}) + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p>W definicji funkcji <strong><code>drawES2015Chart()</code></strong> powyżej, destrukturyzowana lewa strona wyrażenia jest przypisana do pustego literału obiektowego z prawej strony: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. Można by było również napisać funkcję bez prawostronnego przypisania. Jednakże jeśli zostawisz prawą stroę przypisania, funkcja będzie szukać przynajmniej jednego argumentu podczas wywołania, natomiast w jej obecnej formie możesz po prostu wywołać <code><strong>drawES2015Chart()</strong></code> bez podawania parametrów. Ten sposób jest użyteczny gdy chcesz mieć możliwość wywołania funkcji bez podawania parametrów, ten drugi może być użyteczny, gdy chcesz być pewny, że obiekt został wprowadzony do funkcji.</p> +</div> + +<h3 id="Obiekt_zagnieżdżony_i_destrukturyzacja_tablic">Obiekt zagnieżdżony i destrukturyzacja tablic</h3> + +<pre class="brush:js notranslate">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="Iteracja_for..of_i_destrukturyzacja">Iteracja for..of i destrukturyzacja</h3> + +<pre class="brush: js notranslate">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Wyciąganie_pól_z_obiektów_przekazanych_jako_parametr_funkcji">Wyciąganie pól z obiektów przekazanych jako parametr funkcji</h3> + +<pre class="brush:js notranslate">function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>To wyciąga <code>id</code>, <code>displayName</code> i <code>firstName</code> z obiektu <em>user </em>i wypisuje je.</p> + +<h3 id="Wyznaczane_nazwy_właściwości_obiektów_i_destrukturyzacja">Wyznaczane nazwy właściwości obiektów i destrukturyzacja</h3> + +<p>Wyznaczane nazwy waściwości, tak samo jak wh <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">literałach obiektowych</a>, mogą być używane z destrukturyzacją.</p> + +<pre class="brush: js notranslate">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + + + +<h3 id="Reszta_w_destrukturyzacji_obiektów">Reszta w destrukturyzacji obiektów</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">Własciwości reszty/rozproszenia dla ECMAScript</a> (proponowane, etap 3) dodają składnię <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">reszty</a> do destrukturyzacji. Właściwości reszty zbierają pozostałe klucze, które nie zostały pobrane poprzez wzorzec destrukturyzacji.</p> + +<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 }</pre> + +<h3 id="Nipoprawny_identyfikator_JavaScript_jako_nazwa_własności">Nipoprawny identyfikator JavaScript jako nazwa własności</h3> + +<p>Destrukturyzacja może zostać użyta z nazwami własności, które nie są poprawnymi <a href="https://developer.mozilla.org/en-US/docs/Glossary/Identifier">identyfikatorami</a> JavaScript poprzez zapewnienie alternatywnego, poprawnego identyfikatora.</p> + +<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true"</pre> + + + +<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('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja wstępna.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</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>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</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>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wymaga odblokowanej flagi "Enable experimental Javascript features" w `about:flags`</p> + +<h2 id="Notatki_specyficzne_dla_Firefoxa">Notatki specyficzne dla Firefox'a</h2> + +<ul> + <li>Firefox zapewnił niestandardowe rozszerzenie języka w <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> dla destrukturyzacji. To rozszerzenie zostało usunięte w Gecko 40 {{geckoRelease(40)}}. Zobacz {{bug(1083498)}}.</li> + <li>Poczynając od Gecko 41 {{geckoRelease(41)}} żeby dostosować się do specyfikacji ES2015, składnia destrukturyzacji używająca nawiasów, takia jak<code>([a, b]) = [1, 2])</code> lub <code>({a, b}) = { a: 1, b: 2 }</code>, jest teraz uważana za niepoprawną i spowoduje {{jsxref("SyntaxError")}}. Zobacz<a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">post Jeffa Waldena </a>oraz {{bug(1146136)}} aby uzyskać więcej informacji.</li> +</ul> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/function/index.html b/files/pl/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..1d13d1a3c0 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/function/index.html @@ -0,0 +1,144 @@ +--- +title: Operator function +slug: Web/JavaScript/Referencje/Operatory/Operator_function +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/function +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>function</code> jest używany do definiowania funkcji wewnątrz wyrażenia.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">function [<em>nazwa</em>]([<em>argument1[</em>, <em>argument2[</em>, ..., <em>argumentN</em>]]]) { <em>instrukcje </em>} +</pre> + +<h3 id="Parametry" name="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwa</code></dt> + <dd>Nazwa funkcji. Może zostać pominięta, w takim wypadku funkcja staje się anonimowa. Nazwa jest tylko lokalna i istnieje wewnętrz funkcji.</dd> +</dl> + +<dl> + <dt><code>argumentN</code></dt> + <dd>Nazwa argumentu, który ma zostać przekazany do funkcji. Funkcja może posiadać do 255 argumentów.</dd> +</dl> + +<dl> + <dt><code>instrukcje</code></dt> + <dd>Instrukcje, które stanowią ciało funkcji.</dd> +</dl> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Wyrażenie funkcji jest bardzo podobne do deklaracji funkcji i posiada niemal identyczną składnię (zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/function">function</a>, aby uzyskać bardziej szczegółowe informacje). Główną różnicą pomiędzy wyrażeniem a definicją jest <em>nazwa funkcji, </em>która może zostać pominięta i utworzyć funkcję<em> anonimową</em>. Zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje">Funkcje</a>, aby uzyskać informacje o różnicach między instrukcjami funkcji a wyrażeniami funkcji.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p>Poniższy przykład definiuje nienazwaną funkcję i przypisują ją do <code>x</code>. Funkcja zwraca kwadrat jej argumentów:</p> + +<pre>var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Nazwane_wyrażenie">Nazwane wyrażenie</h3> + +<pre><code>var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +};</code></pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarze</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Zaimplementowano w JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<p><code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje">Funkcje</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Obiekty/Function">Function</a></code>, <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Polecenia/function">Polecenie function</a></code></p> diff --git a/files/pl/web/javascript/reference/operators/function_star_/index.html b/files/pl/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..52d7a67c98 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,90 @@ +--- +title: wyrażenie function* +slug: Web/JavaScript/Referencje/Operatory/function* +tags: + - ECMAScript2015 + - Iterator + - JavaScript + - Operator + - funkcja +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <strong><code>function*</code></strong> może być użyte do zdefiniowania funkcji generatora wewnątrz wyrażenia.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">function* [nazwa]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + wyrażenia +}</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>nazwa</code></dt> + <dd>Nazw funkcji. Może być pominięta w przyadku funkcji <em>anonimowych</em>. Nazwa jest lokalna i ograniczona do ciała funkcji.</dd> + <dt><code>paramN</code></dt> + <dd>Nazwa argumentu przekazywanego do funkcji. Funkcja może mieć do 255 argumentów.</dd> + <dt><code>wyrażenia</code></dt> + <dd>Wyrażenia, które zawiera ciało funkcji.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Wyrażenie <code>function*</code> jest bardzo podobne i ma niemal taką samą składnię jak {{jsxref('Statements/function*', 'polecenie function*')}}. Zasadnicza różnica między wyrażenem <code>function*</code> a poleceniem <code>function*</code> to <em>nazwa funkcji</em>, która może być pominięta w wyrażeniach <code>function*</code>, co pozwala na tworzenie anonimowych funkcji generatorów. Zobacz również rozdział o <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funkcjach</a>, aby dowiedzieć się więcej.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Następujący przykład definiuje nienazwaną funkcję generatora i przypisuje ją do <code>x</code>. Funkcja zwraca przekazany argument podniesiony do kwadratu.</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicja początkowa.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/grouping/index.html b/files/pl/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..5a076c3fb0 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,90 @@ +--- +title: Operator grupowania +slug: Web/JavaScript/Referencje/Operatory/Grouping +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator grupowania <code>( )</code> pozwala na określenie kolejności wykonywania działań w wyrażeniach.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Opis">Opis</h2> + +<p>Operator grupowania składa się z pary nawiasów otaczających wyrażenie lub podwyrażenie. Pozwala na nadpisanie standardowego <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Pierwsze%C5%84stwo_operator%C3%B3w">pierwszeństwa operatorów</a>, tak że wyrażenia z niższym piorytetem mogą być wykonane przed wyrażeniami z wyższym priorytetem. Zgodnie z nazwą, operator ten grupuje wyrażenia znajdujące się w nawiasach.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Nadpisanie zasady wykonywania mnożenia i dzielenia przed dodawaniem i odejmowaniem w taki sposób, by dodawanie wykonane było jako pierwsze.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// domyślna kolejność +a + b * c // 7 +// wykonywana domyślnie w taki sposób +a + (b * c) // 7 + +// zmiana kolejności wykonywania działań +// dodawanie przed mnożeniem +(a + b) * c // 9 + +// co odpowiada wyrażeniu +a * c + b * c // 9 +</pre> + +<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('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Pierwsze%C5%84stwo_operator%C3%B3w">Pierwszeństwo operatorów</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/in/index.html b/files/pl/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..0a8ef0f068 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/in/index.html @@ -0,0 +1,92 @@ +--- +title: Operator in +slug: Web/JavaScript/Referencje/Operatory/Operator_in +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/in +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Operator <code>in</code> zwraca wartość <code>true</code> (prawda), jeśli określona własność jest w określonym obiekcie.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.4</td> + </tr> + </tbody> +</table> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<p><code> + <i> + propNameOrNumber</i> + in + <i> + objectName</i> + </code></p> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<dl> + <dt> + <code>propNameOrNumber</code></dt> + <dd> + Łańcuch znaków lub wartość liczbowa reprezentujące nazwę własności lub indeks tablicy.</dd> +</dl> +<dl> + <dt> + <code>objectName</code></dt> + <dd> + Nazwa obiektu.</dd> +</dl> +<h3 id="Opis" name="Opis">Opis</h3> +<p>Poniższe przykłady pokazują wybrane sposoby użycia operatora <code>in</code>.</p> +<pre>// Tablice +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // zwraca true +3 in trees // zwraca true +6 in trees // zwraca false +"bay" in trees // zwraca false (musisz określić numer indeksu, + // nie wartość w tym indeksie) +"length" in trees // zwraca true (length jest własnością tablicy Array) + +// Obiekty predefiniowane +"PI" in Math // zwraca true +myString=new String("coral") +"length" in myString // zwraca true + +// Custom objects +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // zwraca true +"model" in mycar // zwraca true +</pre> +<p>Musisz określić obiekt z prawej strony operatora <code>in</code>. Na przykład: możesz określić łańcuch znaków stworzony za pomocą konstruktora <code>String</code>, ale nie możesz określić łańcucha znaków wprost.</p> +<pre>color1=new String("green") +"length" in color1 // zwraca true +color2="coral" +"length" in color2 // generuje błąd (color nie jest obiektem typu String) +</pre> +<h4 id="Zastosowanie_in_z_usuni.C4.99tymi_lub_niezdefiniowanymi_w.C5.82asno.C5.9Bciami" name="Zastosowanie_in_z_usuni.C4.99tymi_lub_niezdefiniowanymi_w.C5.82asno.C5.9Bciami">Zastosowanie <code>in</code> z usuniętymi lub niezdefiniowanymi własnościami</h4> +<p>Jeśli usuniesz własność za pomocą operatora <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete">delete</a></code>, operator <code>in</code> zwróci wartość false (fałsz) dla tej własności.</p> +<pre>mycar = {make:"Honda",model:"Accord",year:1998} +delete mycar.make +"make" in mycar // zwraca false + +trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +3 in trees // zwraca false +</pre> +<p>Jeśli ustalisz własność jako niezdefiniowaną, ale nie usuniesz jej, operator <code>in</code> zwróci wartość true (prawda) dla tej własności.</p> +<pre>mycar = {make:"Honda",model:"Accord",year:1998} +mycar.make=undefined +"make" in mycar // zwraca true + +trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +3 in trees // zwraca true +</pre> +<p>Aby uzyskać dodatkowe informacje o zastosowaniu operatora <code>in</code> z usuniętymi elementami tablicy, zobacz <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_delete">delete</a>.</p> diff --git a/files/pl/web/javascript/reference/operators/index.html b/files/pl/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..016c55af35 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/index.html @@ -0,0 +1,282 @@ +--- +title: Operatory +slug: Web/JavaScript/Referencje/Operatory +tags: + - JavaScript + - Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Wyrażenia_i_operatory_w_podziale_na_kategorie">Wyrażenia i operatory w podziale na kategorie</h2> + +<h2 id="sect1"> </h2> + +<h2 id="Lista_operatorów_w_kolejności_alfabetycznej_znajduje_sie_w_pasku_bocznym_po_lewej_stronie."><span style="font-size: 14px; font-weight: normal;">Lista operatorów w kolejności alfabetycznej znajduje sie w pasku bocznym po lewej stronie.</span></h2> + +<h3 id="Wyrażenia_podstawowe">Wyrażenia podstawowe</h3> + +<p>Podstawowe słowa kluczowe i wyrażenia w JavaScript.</p> + +<dl> + <dt>{{jsxref("Operator/this", "this")}}</dt> + <dd>Słowo <code>this</code> odnosi się do kontekstu wywołania.</dd> + <dt>{{jsxref("Operator/function", "function")}}</dt> + <dd>Słowo <code>function</code> umożliwia zdefniowanie wyrażenia funkcji .</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/class", "class")}}</dt> + <dd>Słowo <code>class</code> definiuje wyrażenie klasy.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Global_Objecty/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operatory/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operatory/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operatory/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operatory/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "A++", "#Inkrementacja")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "A--", "#Dekrementacja")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "++A", "#Inkrementacja")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "--A", "#Dekrementacja")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operatoryy/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operatory/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operatory/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operatory/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Operatory_arytmetyczne">Operatory arytmetyczne</h3> + +<h3 id="Arithmetic_operators_take_numerical_values_(either_literals_or_variables)_as_their_operands_and_return_a_single_numerical_value."><span style="font-size: 14px;">Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</span></h3> + +<dl> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operatory/Operatory_arytmetyczne", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Operatory_porównania">Operatory porównania</h3> + +<p>Operator porównania, jak nazwa wskazuje, porównuje operandy i zwraca wartość logiczną zależną od tego, czy wartość porównania jest prawdziwa. </p> + +<dl> + <dt>{{jsxref("Operatory/in", "in")}}</dt> + <dd>Operator <code>in</code> ustala, czy obiekt posiada daną właściwość.</dd> + <dt>{{jsxref("Operatory/instanceof", "instanceof")}}</dt> + <dd>Operator <code>instanceof</code> ustala czy obiekt jest instancją innego obiektu.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operatory/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operatory/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operatory/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operatory/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operatory/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operatory/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operatory/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operatory/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operatory/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("OperatorsyAssignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operatory/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operatory/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operatory/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operatory/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operatory/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operatory/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<h2 id="Specifications">Specifications</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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/instanceof/index.html b/files/pl/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..d9b83cd838 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,168 @@ +--- +title: Operator instanceof +slug: Web/JavaScript/Referencje/Operatory/Operator_instanceof +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operator</strong> <strong><code>instanceof</code> </strong>sprawdza czy właściwość konstruktora <code>prototype</code> pojawia się gdziekolwiek w łańcuchu prototypowym obiektu.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</p> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<dl> + <dt> + <h3 id="Parametry">Parametry</h3> + <code>object</code></dt> + <dd>Obiekt do testowania.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Funkcja przeciwko której testujemy.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Operator <code>instanceof</code> sprawdza obecność <code>constructor.prototype</code> w łańcuchu prototypowym obiektu <code>object</code></p> + +<pre class="brush: js">// definiowanie konstruktorów +function C() {} +function D() {} + +var o = new C(); + +// true, ponieważ: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, ponieważ D.prototype nie występuje w łańcuchu prototypowym o. +o instanceof D; + +o instanceof Object; // true, ponieważ: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, ponieważ C.prototype nie ma już w łańcuchu prototypowym o +o instanceof C; + +D.prototype = new C(); // add C to [[Prototype]] linkage of D +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true since C.prototype is now in o3's prototype chain +</pre> + +<p>Note that the value of an <code>instanceof</code> test can change based on changes to the <code>prototype</code> property of constructors, and it can also be changed by changing an object prototype using <code>Object.setPrototypeOf</code>. It is also possible using the non-standard <code>__proto__</code> pseudo-property.</p> + +<h3 id="instanceof_and_multiple_context_(e.g._frames_or_windows)"><code>instanceof</code> and multiple context (e.g. frames or windows)</h3> + +<p>Different scopes have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, <code>[] instanceof window.frames[0].Array</code> will return <code>false</code>, because <code>Array.prototype !== </code><code>window.frames[0].Array</code> and arrays inherit from the former.</p> + +<p>This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is, in fact, an Array using <code>Array.isArray(myObj)</code></p> + +<p>For example checking if a <a href="/en-US/docs/Web/API/Node">Nodes</a> is a <a href="/en-US/docs/Web/API/SVGElement">SVGElement</a> in a different context you can use <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p> + +<div class="note"><strong>Note for Mozilla developers:</strong><br> +In code using XPCOM <code>instanceof</code> has special effect: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) calls <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> and returns <code>true</code> if QueryInterface succeeded. A side effect of such call is that you can use <em><code>xpcomInterface</code></em>'s properties on <code>obj</code> after a successful <code>instanceof</code> test. Unlike standard JavaScript globals, the test <code>obj instanceof xpcomInterface</code> works as expected even if <code>obj</code> is from a different scope.</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> + +<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> + +<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = 'This is a simple string'; +var myString = new String(); +var newStr = new String('String created with constructor'); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true + +myObj instanceof Object; // returns true, despite an undefined prototype +({}) instanceof Object; // returns true, same case as above + +myString instanceof Date; // returns false + +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false +</pre> + +<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> + +<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car('Honda', 'Accord', 1998); +var a = mycar instanceof Car; // returns true +var b = mycar instanceof Object; // returns true +</pre> + +<h2 id="Specifications">Specifications</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/new.target/index.html b/files/pl/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..8b60074e92 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,134 @@ +--- +title: new.target +slug: Web/JavaScript/Referencje/Operatory/new.target +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p><strong><code>new.target</code></strong> pozwala sprawdzić czy konstruktor lub funkcja była zainicjalizowana używając operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>. Kiedy w konstruktorze lub funkcji zainicjalizowany jest operatora <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>, <code>new.target</code> zwraca referencje do konstruktora lub funkcji. W normalnym wywołaniu funkcji, <code>new.target</code> jest {{jsxref("undefined")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Opis">Opis</h2> + +<p><code>new.target</code> składa się ze słowa <code>"new</code>", kropki i pola o nazwie <code>"target"</code>. Przeważnie "<code>new."</code> jest kontekstem dostępu do pola, ale w tym przypadku "new." nie jest tak naprawdę obiektem. W wywołaniu konstruktora, <code>new.target</code> nawiązuje do konstruktora wywołanego przez <code>new</code> więc "<code>new.</code>" staje się wirtualnym kontekstem.</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Pole </font>new.target</code> jest meta polem które jest dostępne dla wszystkich funkcji. W <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, <code>new.target</code> nawiązuje do <code>new.target</code> otaczającej funkcji.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="new.target_w_wywołaniu_funkcji">new.target w wywołaniu funkcji</h3> + +<p>W normalnym wywołaniu funkcji (w przeciwieństwie do wywołania konstruktora), <code>new.target</code> jest {{jsxref("undefined")}}. Pozwala Ci to stwierdzić, czy funkcja została wywołana wraz z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> jako konstruktor.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw "Foo() must be called with new"; + console.log("Foo instantiated with new"); +} + +Foo(); // throws "Foo() must be called with new" +new Foo(); // logs "Foo instantiated with new" +</pre> + +<h3 id="new.target_w_konstruktorze">new.target w konstruktorze</h3> + +<p>W konstruktorach klasy, <code>new.target</code> nawiązuje do konstruktora który został bezpośrednio wywołany z <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a>. Dzieje się tak również w przypadku kiedy konstruktor znajduje się w klasie rodzica, i został wywołany z konstruktorze dziecka.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // logs "A" +var b = new B(); // logs "B" +</pre> + +<h2 id="Specyfikacja">Specyfikacja</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('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<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(46.0)}}</td> + <td>{{CompatGeckoDesktop(41)}}</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>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/new/index.html b/files/pl/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..e6153d3a69 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/new/index.html @@ -0,0 +1,183 @@ +--- +title: Operator new +slug: Web/JavaScript/Referencje/Operatory/Operator_new +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operator</strong><strong> <code>new</code> </strong>tworzy nową instancję typu obiektu zdenifiowanego przez użytkownika lub instancję wbudowanego typu obiektu, który posiada konstruktor.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>Klasa bądź funkcja, która definiuje typ obiektu instancji.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Lista wartości z którymi zostanie wywołany <code>constructor</code>.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p>Tworzenie obiektu przez zdefiniowanego przez użytkownika przebiega w dwóch krokach:</p> + +<ol> + <li>Zdefiniowanie typu obiektu poprzez napisanie funkcji.</li> + <li>Tworzenie jego instancji przy użyciu słowa kluczowego <code>new</code>.</li> +</ol> + +<p>Aby zdefiniować typ obiektu, stwórz funkcję dla tego typu, która określa jego nazwę i właściwości. Obiekt może mieć właściwość, której wartością jest on sam lub inny obiekt. Spójrz na przykłady poniżej</p> + +<p>Kiedy wykonywaniy jest kod <code>new <em>Foo</em>(...)</code>, dzieją się następujące rzeczy:</p> + +<ol> + <li>Tworzeny jest nowy obiekt, dzidziczący po <code><em>Foo</em>.prototype</code>.</li> + <li>Wywoływany jest konstruktor <em><code>Foo</code></em> z określonymi argumentami, a kontekst <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> zostaje przypisany do nowo utworzonego obiektu. <code>new <em>Foo</em></code> jest równoznaczne z <code>new </code><em><code>Foo</code></em><code>()</code>, tzn. w przypadku gdy lista argumentów jst nieokreślona, <em><code>Foo</code></em> jest wywoływane bez argumentów.</li> + <li>Obiekt zwrócony przez konstruktor staje się wynikiem całego wyrażenia <code>new</code>. Jeżeli konstruktor nie zwraca obiektu, obiekt stworzony w kroku 1 jest używany zamiast niego. (Zwykle kontruktory nie zwracają żadnej wartości, ale mogą tak czynić jeśli chcą nadpiać normalny proces tworzenia obiektu.)</li> +</ol> + +<p>Zawsze można dodać właściwość do wcześniej stworzonego obiektu. Na przykład, wyrażenie <code>car1.color = "black"</code> dodaje właściwość <code>color</code> do <code>car1</code>, przypisuje mu wartość "<code>black</code>". Jednakże, nie wpływa to w żaden sposób na inne obiekty. Aby dodać właściwość do wszystkich obiektów tego samego typu, trzeba dodać tę właściwość do definicji typu obiektu <code>Car</code>.</p> + +<p>Można dodać wspólną właściwość do wcześniej zdefiniowanego typu obiektu korzystając z właściwości <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Definiuje ona wspólną właściwość dla wszystkich obiektów tego typu, a nie charakterystyczną dla instancji typu obiektu. Następujący kod dodaje właściwość <code>color</code> o wartości <code>null</code> do wszystkich obiektów typu <code>Car</code>, a następnie znienia tę wartość tylko w obiekcie <code>car1</code> na łańcuch "<code>black</code>" . Po więcej informacji, zobacz <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<pre class="brush: js notranslate">function Car() {} +car1 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = null; +console.log(car1.color); // null + +car1.color = 'black'; +console.log(car1.color); // black +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Typ_obiektu_i_jego_instancja">Typ obiektu i jego instancja</h3> + +<p>Przypuśćmy, że chcesz stworzyś typ obiektu dla aut. Chcesz, żeby był nazwany <code>car</code> i by miał właściwości <code>make</code>, <code>model</code> i <code>year</code>. Żeby to osiągnąć należy stworzyć następującą funkcję:</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Teraz można stworzyć obiekt <code>mycar</code>:</p> + +<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Powyższy kod deklaruje zmienną <code>mycar</code> i przypisuje do niej określone właściwości. Wartość <code>mycar.make</code> to łańcuch "Eagle", <code>mycar.year</code> to liczba 1993 itd.</p> + +<p>Można stworzyć nieograniczoną ilość obiektów <code>Car</code> poprzez słowo kluczowe <code>new</code>. Na przykład:</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +</pre> + +<h3 id="Właściwość_obiektu_będąca_innym_obiektem">Właściwość obiektu, będąca innym obiektem</h3> + +<p>Przypuśćmy, że definiujemy typ obiektu <code>Person</code> jak poniżej:</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>A następnie tworzymy dwa obiekty <code>Person</code>:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Teraz możemy przepisać definicję <code>Car</code> tak, by zawierała właściwość <code>owner</code>, która przyjmuje obiekt:</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Aby utworzyć nowe obiekty, należy napisać:</p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>Zamiast przekazywania wartości liczbowych lub łańcuchów znaków, w powyższym przykładzie przekazywane są obiekty: <code>rand</code> oraz <code>ken</code>. Aby uzyskać imię właściciela samochodu <code>car2</code>, należy napisać:</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Wstępna definicja. Zaimpelementowano w JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/pl/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..c8a264e50e --- /dev/null +++ b/files/pl/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,251 @@ +--- +title: Operator null'owego scalania (??) +slug: Web/JavaScript/Referencje/Operatory/Nullish_coalescing_operator +tags: + - JavaScript + - Language feature + - Operator + - Reference + - nullish coalescing +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p><strong>Operator null'owego scalania (<code>??</code>)</strong> - to operator logiczny, stosowany w wyrażeniach, który zwraca to co jest po jego lewej stronie, tak długo, jak to nie jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, wtedy zwraca to, co jest po prawej.</p> + +<div class="blockIndicator note"> +<p>Początkowo ewaluowane jest tylko wyrażenie z lewej strony.<br> + Dopiero, gdy zachodzi taka potrzeba, ewaluowane jest prawe wyrażenie.</p> +</div> + +<p>Jest podobny do <strong>logicznego operatora LUB (<code>||</code>)</strong> ( <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a> ), ale <strong>LUB</strong> decyduje o tym, czy wziąć prawą wartość, na innej podstawie:<br> + <em>Czy lewa wartość jest fałszopodobna</em> (<a href="/en-US/docs/Glossary/Falsy">Falsy</a>)<em>?</em><br> + <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> i <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> są fałszopodobne, ale sęk w tym, że nie tylko one, ale również np. <code>0</code>, czy <code>""</code>. Czasem nie chce się podmieniać niczego za <code>0</code> i <code>""</code>, uważając je za dopuszczalne wartości.<br> + Wtedy właśnie przydaje się ten operator.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br> + See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate"><u>LWyr</u> ?? <u>PWyr</u></pre> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Pole</th> + <th scope="col">Opis</th> + </tr> + </thead> + <tbody> + <tr> + <td>LWyr</td> + <td>Wyrażenie główne, ewaluowane na początku.<br> + Jeżeli jego wartość wynikowa jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, to nie ona zostanie zwrócona, ale wartość wynikowa wyrażenia <u>PWyr</u>. </td> + </tr> + <tr> + <td>PWyr</td> + <td>Wyrażenie zamienne, ewaluowane, kiedy wartość <u>LWyr</u> jest <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>, albo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Przykłady"><span style="">Przykłady</span></h2> + +<h3 id="Użycie_operatora">Użycie operatora</h3> + +<p>W tym przykładzie użyjemy <strong>operatora null'owego scalania</strong> do podania zapasowych wartości, przy inicjowaniu stałych:</p> + +<pre class="brush: js notranslate">const wartoscNull = null; +const warA = wartoscNull ?? "domyślne dla A"; +console.log(warA); + +// konsola: "domyślne dla A" + + + +const pustyTekst = ""; // fałszopodobny +const warB = pustyTekst ?? "domyślne dla B"; +console.log(warB); + +// konsola: "" +// ponieważ "??" reaguje tylko konkretnie na null albo undefined + + + +const jakasLiczba = 42; +const warC = jakasLiczba ?? 0; +console.log(warC); + +// konsola: 42</pre> + +<h3 id="Porównanie_działania_i">Porównanie działania "??" i "||"</h3> + +<p>Wcześniej przed pojawieniem się tego operatora, używano <strong>LUB (<code>||</code>) (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a>)</strong>:</p> + +<pre class="notranslate">let liczba; +let zabezpLicz = liczba || 1; +// zmienna "wejscie" nie była nigdy zapełniona żadną wartością, +// więc była "undefined", a undefined jest fałszopodobne, więc +// JavaScript wziął zapasowe '1'. + +console.log(2 * zabezpLicz); +// konsola: 2 +</pre> + +<p>To działa, ale...<br> + przez to jakim operatorem jest <strong>LUB</strong>, nie tylko <code>undefined</code> zostanie tu zamienione, ale też i <code>0</code>, które, w kontekście tego przykładu, powiedzmy, że jest wartością, która powinna być ok:</p> + +<pre class="brush: js notranslate">let liczba = 0; +let zabezpLicz = liczba || 1; +// zmienna "wejscie" została zapełniona zerem, ale jest fałszopodobne, +//więc JavaScript wziął zapasowe '1'. + +console.log(2 * zabezpLicz); +// konsola: 2 +// chcieliśmy: 0 +</pre> + +<p>Operator null'owego scalania rozwiązuje ten problem:</p> + +<pre class="brush: js notranslate">let liczba = 0; +let zabezpLicz = liczba ?? 1; +// zmienna "wejscie" została zapełniona zerem, +//mimo tego, że jest fałszopodobne, "??" akceptuje je, bo to nie null, ani undefined, i +//JavaScript zostawia '0'. + +console.log(2 * zabezpLicz); +// konsola: 0 +</pre> + +<h3 id="Pomijanie_ewaluacji">Pomijanie ewaluacji</h3> + +<p>Podobnie jak inne operatory logiczne <strong>LUB (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR" style="">Logical OR (||)</a>)</strong> i <strong>I (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND">Logical AND (&&)</a>)</strong>, ten operator rozpoczyna od ewaluacji wyrażenia po lewej stronie, i dopiero gdy trzeba, zajmuje się prawą stroną:</p> + +<pre class="brush: js notranslate">function A(){ + console.log("Tu A!"); + return false; +} +function B(){ + console.log("Tu B!"); + return true; +} + +if( A() ?? B() ) console.log("Otrzymano 'true'"); +else console.log("Otrzymano 'false'"); +// konsola: "Otrzymano 'false'" +</pre> + +<p>i :</p> + +<pre class="brush: js notranslate">function A(){ + console.log("Tu A!"); + return null; // teraz tu jest zwracany null, na który reaguje "??" +} +function B(){ + console.log("Tu B!"); + return true; +} + +if( A() ?? B() ) console.log("Otrzymano 'true'"); +else console.log("Otrzymano 'false'"); +// konsola: "Otrzymano 'true'"</pre> + +<h3 id="Nie_działa_seryjnie_ani_z_LUB_ani_z_I">Nie działa seryjnie, ani z LUB, ani z I</h3> + +<p>W wyrażeniach, nie można stawiać zwyczajnie <strong>operatora null'owego scalania</strong> w otoczeniu operatorów <strong>LUB</strong> i <strong>I</strong>, mimo ustalonej kolejności wykonywania działań. Będzie to odbierane jako błąd składniowy:</p> + +<pre class="brush: js example-bad notranslate">null || undefined ?? "yyy..."; // to będzie SyntaxError +true || undefined ?? "aha."; // to też będzie SyntaxError +//bo tu chodzi o to, że jest "||" i "??" razem, nie o wartości. +</pre> + +<p>Trzeba je rozdzielić nawiasami:</p> + +<pre class="brush: js example-good notranslate">(null || undefined) ?? "yyy..."; // zwraca: "yyy..." +null || (undefined ?? "działa!"); // zwraca: "działa!" +</pre> + +<h3 id="Odniesienie_do_Operatora_opcjonalnego_dostępu_.">Odniesienie do Operatora opcjonalnego dostępu "?."</h3> + +<p>Sposób w który <strong>operator null'owego scalania</strong> pracuje z wartościami <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" style="">null</a></code> i <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>, jest intuicyjny analogicznie u <strong>operatora opcjonalnego dostępu</strong> (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining (?.)</a>, i razem pozwalają na ciekawe akcje, np.:</p> + +<pre class="notranslate">class objekt{ + tekst; + + constructor(tekst = null){ + this.tekst = tekst; + } + + odczytTekst(){ + return this.tekst; + } + wpisTekst(w){ + this.tekst = w; + return true; + } +} + +let objekty = [new objekt("cześć!"), null, new objekt()]; + + + +// zadanie kodu: zamień tekst'y w objekt'ach na duże litery, +// używając funkcji dostępu, a pozostawiając puste wartości +// bez zmian + + +// wersja typeof +for(let i = 0; i < objekty.length; i++) + if(typeof(objekty[i]) == "object") + if(typeof(objekty[i].odczytTekst()) == "string") + objekty[i].wpisTekst(objekty[i].odczytTekst().toUpperCase()); + + +// wersja operatorów "??" i "?." +for(let i = 0; i < objekty.length; i++) + objekty[i]?.wpisTekst(objekty[i]?.odczytTekst()?.toUpperCase() ?? null); + +console.log(objekty); +</pre> + +<p>Czasami użycie tych operatorów upraszcza kod.<br> + Poza tym każda funkcja jest wywoływana najwyżej raz i może to być co kolwiek.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Postępy_implementacji">Postępy implementacji</h3> + +<p>Tabelka pod spodem pokazuje codzienny status implementacji tej funkcji. Jest tak, ponieważ nie osiągnięto jeszcze stabilności między przeglądarkami.<br> + Dane są generowane, poprzez przeprowadzanie odpowiednich testów funkcji w <a href="https://github.com/tc39/test262" style="">Test262</a>, standardowym zestawie testów dla JavaScripta, na najnowszych kompilacjach (en: "nightly build"), lub najnowszych wydaniach (en: "latest release") silników JavaScripta przeglądarek.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="Zobacz_też...">Zobacz też...</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">The logical OR (<code>||</code>) operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters in functions</a></li> +</ul> 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> diff --git a/files/pl/web/javascript/reference/operators/operator_precedence/index.html b/files/pl/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..87765f3e1a --- /dev/null +++ b/files/pl/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,336 @@ +--- +title: Pierwszeństwo operatorów +slug: Web/JavaScript/Referencje/Operatory/Pierwszeństwo_operatorów +tags: + - JavaScript + - Operator + - pierwszeństwo +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<div></div> + +<div>Pierwszeństwo operatorów ustala kolejność, w jakiej operatory są ewaluowane. Operatory z wyższym pierwszeństwem są ewaluowane jako pierwsze.</div> + +<div></div> + +<p>Prosty przykład:</p> + +<pre class="brush: js notranslate">3 + 4 * 5 // zwraca 23 +</pre> + +<p>Operator mnożenia ("<code>*</code>") ma wyższe pierwszeństwo niż operator dodawania ("<code>+</code>") i dlatego będzie ewaluowany jako pierwszy.</p> + +<h2 id="Associativity" name="Associativity">Łączność</h2> + +<p>Łączność określa kolejność, w jakiej przetwarzane są operatory o takim samym pierwszeństwie. Przykłądowo, rozważny wyrażenie:</p> + +<pre class="syntaxbox notranslate">a OP b OP c +</pre> + +<p>Jeżeli <code>OP<sub>1</sub></code> and <code>OP<sub>2 </sub></code>mają różne poziomy pierwszeństwa operatorów (patrz tabela poniżej), operator z wyższym poziomem pierwszeństwa zostanie wykonany jako pierwszy, a kolejność zapisu nie ma znaczenia. Zwróćmy uwagę na w poniższym przykładzie, że mnożenie ma wyższy poziom pierwszeństwa i tym samym zostanie wykonane jako pierwsze, pomimo tego, że to dodawanie jest zapisane w kodzie jako pierwsze.</p> + +<pre class="notranslate">console.log(3 + 10 * 2); // wynik 23 +console.log(3 + (10 * 2)); // wynik 23 ponieważ nawiasy tutaj nie mają znaczenia +console.log((3 + 10) * 2); // wynik 26 ponieważ nawiasy zmieniają kolejność działań</pre> + +<p>Lewo-łączność (od lewej do prawej) oznacza, iż będzie ono przetworzone jako <code>(a OP b) OP c</code>, podczas gdy prawo-łączność (od prawej do lewej) oznacza, iż będzie ono zinterpretowane jako <code>a OP (b OP c)</code>. Operatory przypisania są prawo-łączne, więc możesz napisać:</p> + +<pre class="brush: js notranslate">a = b = 5; +</pre> + +<p>oczekując, że <code>a</code> i <code>b</code> otrzymają wartość 5. Wynika to z faktu, iż operator przypisania zwraca wartość, która jest przypisana. Najpierw wartość <code>b</code> ustawiana jest na 5, a następnie wartość zmiennej <code>a</code> jest ustawiana na wartość <code>b</code>.</p> + +<h2 id="Tabela" name="Tabela">Tabela</h2> + +<p>Poniższa tabela uporządkowana jest od najwyższego (19) do najniższego (0) pierwszeństwa.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Pierwszeństwo</th> + <th>Rodzaj operatora</th> + <th>Łączność</th> + <th>Operator</th> + </tr> + <tr> + <td>19</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Grouping</a></td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td rowspan="3">18</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Member Access</a></td> + <td>left-to-right</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Computed Member Access</a></td> + <td>left-to-right</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (z listą argumentów)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Wywołanie funkcji</a></td> + <td>left-to-right</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (bez listy argumentów)</td> + <td>right-to-left</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">16</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postinkrementacja</a></td> + <td>n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postdekrementacja</a></td> + <td>n/a</td> + <td><code>… --</code></td> + </tr> + <tr> + <td rowspan="9">15</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Negacja logiczna (NOT)</a></td> + <td>right-to-left</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Negacja bitowa (NOT)</a></td> + <td>right-to-left</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Plus</a></td> + <td>right-to-left</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Negation</a></td> + <td>right-to-left</td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Preinkrementacja</a></td> + <td>right-to-left</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Predekrementacja</a></td> + <td>right-to-left</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + <td>right-to-left</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + <td>right-to-left</td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + <td>right-to-left</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Mnożenie</a></td> + <td>left-to-right</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Dzielenie</a></td> + <td>left-to-right</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Reszta z dzielenia</a></td> + <td>left-to-right</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Dodawanie</a></td> + <td>left-to-right</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Odejmowanie</a></td> + <td>left-to-right</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w lewo</a></td> + <td>left-to-right</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w prawo</a></td> + <td>left-to-right</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowe przesunięcie w prawo bez znaku</a></td> + <td>left-to-right</td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Mniejsze niż</a></td> + <td>left-to-right</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Mniejsze lub równe</a></td> + <td>left-to-right</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Większe niż</a></td> + <td>left-to-right</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Większe lub równe</a></td> + <td>left-to-right</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + <td>left-to-right</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + <td>left-to-right</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Równość</a></td> + <td>left-to-right</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Nierówność</a></td> + <td>left-to-right</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Ścisła równość</a></td> + <td>left-to-right</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Ścisła nierówność</a></td> + <td>left-to-right</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Koniunkcja bitowa (AND)</a></td> + <td>left-to-right</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitowa alternatywa wykluczająca (XOR)</a></td> + <td>left-to-right</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Alternatywa bitowa (OR)</a></td> + <td>left-to-right</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Koniunkcja logiczna (AND)</a></td> + <td>left-to-right</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Alternatywa logiczna (OR)</a></td> + <td>left-to-right</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Warunek</a></td> + <td>right-to-left</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="12">3</td> + <td rowspan="12"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Przypisanie</a></td> + <td rowspan="12">right-to-left</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td>2</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td>right-to-left</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td> + <td>n/a</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>0</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td> + <td>left-to-right</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/javascript/reference/operators/pipeline_operator/index.html b/files/pl/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..9bc36390af --- /dev/null +++ b/files/pl/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,65 @@ +--- +title: Operator potoku +slug: Web/JavaScript/Referencje/Operatory/Operator_potoku +tags: + - JavaScript + - Operator + - ekxperymentalny +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<div>Eskperymentalny operator potoku <code>|></code> (obecnie na pierwszym etapie testów) pozwala na tworzenie łańcuchów wywołań funkcji w czytelny sposób. Dodaje lukier syntaktyczny do wywołania funkcji z pojedynczym argumentem, pozwalając przykładowo na pisanie <code>'%21' |> decodeURI</code> zamiast <code>decodeURI('%21')</code>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">wyrażenie |> funkcja</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Łańcuchowe_wywołania_funkcji">Łańcuchowe wywołania funkcji</h3> + +<p>Operator potoku może poprawić czytelność kodu przy łańcuchowych wywołaniach wielu funkcji.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// bez operatora potoku +double(increment(double(double(5)))); // 42 + +// z użyciem potoku +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwagi</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> + <td>Stage 1</td> + <td>Nie jest jeszcze częścią specyfikacji ECMAScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/property_accessors/index.html b/files/pl/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..5db4669011 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,177 @@ +--- +title: Operatory pamięci +slug: Web/JavaScript/Referencje/Operatory/Operatory_pamięci +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<p>Operatory pamięci umożliwiają dostęp do właściwości lub metod obiektu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">object.property +object['property'] +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Obiekt, w rzeczywistości, jest <em>kojarzeniową tablicą</em> (jak <em>mapa, słownik, hash, poglądowa tabela</em>).<em> Klucze </em>w tablicy są nazwami właściwości i metod (właściwości odnoszących się do funkcji). Istnieją dwa sposoby uzyskania dostępu do właściwości: zapis z kropką lub zapis z nawiasem (operator indeksu dolnego).</p> + +<h3 id="Dot_notation" name="Dot_notation">Zapis z kropką</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p><code>property</code> musi być nazwane poprawnie, według zasad JavaScript, innymi słowy: musi być sekwencją znaków alfanumerycznych (włączając w to znak podkreślenia oraz znak dolara), która nie zaczyna się od cyfry. Na przykład: <code>object.$1</code> jest poprawny, natomiast <code>object.1</code> jest nieprawidłowy.</p> + +<p>Przykład:</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Metoda "createElement" jest wywoływana z poziomu <code>document</code>.</p> + +<pre class="brush: js" id="Bracket_notation">Zapis z nawiasem</pre> + +<pre>get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> jest łańcuchem znaków, nie musi być poprawnym identyfikatorem - może być zupełnie dowolny, przykładowo: "1foo", "!bar!" lub nawet " " (spacja).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Mimo różnic, powyższa notacja wykonuje dokładnie to samo co zapis z kropką.</p> + +<h3 id="Nazwy_w.C5.82asno.C5.9Bci" name="Nazwy_w.C5.82asno.C5.9Bci">Nazwy właściwości</h3> + +<p>Nazwy właściwości muszą być łańcuchami. Oznacza to, że nazwy nie będące łańcuchami nie mogą być używane jako klucze w obiekcie. Dowolny obiekt nie będący łańcuchem, wliczając w to liczby, zostanie zrzutowany do obiektu string poprzez metodę {{jsxref("Object.toString", "toString()")}}.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +alert(object[1]); +</pre> + +<p>Powyższy kod wyświetla "value", ponieważ 1 został zrzutowany do '1'.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>W tym przykładzie także zostanie wypisany "value", ponieważ zarówno foo jak i bar zostały skonwertowane do tego samego łańcucha. W silniku JavaScript <a href="/pl/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, łańcuch będzie wyglądał następująco: "{{ mediawiki.external('object Object') }}".</p> + +<h3 id="Wi.C4.85zanie_metod" name="Wi.C4.85zanie_metod">Wiązanie metod</h3> + +<p>Metoda nie jest powiązana z obiektem, którego jest metodą. Innymi słowy: <code>this</code> w metodzie nie jest ustawiony na sztywno. Nie musi on koniecznie odnosić się do obiektu zawierającego metodę. Zamiast tego <code>this</code> jest przekazywany do funkcji podczas jej wywoływania. Zajrzyj do <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operatory_specjalne/Operator_this#Wi.C4.85zanie_metod" title="Dokumentacja_języka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_this#Wi.C4.85zanie_metod">wiązania metod</a> po więcej informacji.</p> + +<h3 id="Note_on_eval" name="Note_on_eval">Uwaga dotycząca <code>eval</code></h3> + +<p>Początkujący programiści JavaScript popełniają częsty błąd, używając <a href="/pl/docs/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Funkcje/eval" title="Dokumentacja_języka_JavaScript_1.5/Funkcje/eval">eval</a> tam gdzie może być użyty zapis z nawiasem. Poniżej zaprezentowany jest przykład.</p> + +<pre class="brush: js">x = eval('document.form_name.' + strFormControl + '.value'); +</pre> + +<p><code>eval</code> jest wolno-działającą funkcją i powinien być jak najrzadziej używany. Zoptymalizowany fragment kodu brzmi:</p> + +<pre class="brush: js">x = document.form_name[strFormControl].value; +</pre> + + +<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('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicja początkowa. Zaimplementowana w JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object/defineProperty")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/spread_syntax/index.html b/files/pl/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..a45d730722 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,244 @@ +--- +title: Składnia rozwinięcia +slug: Web/JavaScript/Referencje/Operatory/Składnia_rozwinięcia +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>Składnia rozwinięcia</strong> (ang. <em>spread syntax</em>) pozwala na rozwinięcie iterowalnego wyrażenia, takiego jak wyrażenie tablicowe lub ciąg znaków, tam gdzie oczekiwanych jest zero lub więcej argumentów (dla wywołań funkcji) lub elementów (dla literałów tablicowych). Pozwala również na rozwinięcie wyrażeń obiektowych w miejscach, gdzie oczekiwanych jest zero lub więcej par klucz-wartość (dla literałów obiektowych).</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="Składnia">Składnia</h2> + +<p>Dla wywołań funkcji:</p> + +<pre class="syntaxbox">mojaFunkcja(...iterowalnyObiekt); +</pre> + +<p>Dla literałów tablicowych lub łańcuchów znaków:</p> + +<pre class="syntaxbox">[...iterowalnyObiekt, '3', 'cztery', 5];</pre> + +<p>Dla literałów obiektowych (nowe w ECMAScript 2018):</p> + +<pre class="syntaxbox">let klonObiektu = { ...obiekt };</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Rozwinięcie_w_wywołaniach_funkcji">Rozwinięcie w wywołaniach funkcji</h3> + +<h4 id="Zastąpienie_apply">Zastąpienie <code>apply</code></h4> + +<p>Powszechne jest używanie {{jsxref( "Function.prototype.apply")}} w przypadkach, w których chcemy użyć elementów tablicy jako argumentów funkcji.</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var argumenty = [0, 1, 2]; +mojaFunkcja.apply(null, argumenty);</pre> + +<p>Przy użyciu operatora rozpakowania można to zapisać jako:</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var argumenty = [0, 1, 2]; +mojaFunkcja(...argumenty);</pre> + +<p>Każdy argument na liście argumentów może użyć operatora rozpakowania, można go także używać wielokrotnie.</p> + +<pre class="brush: js">function mojaFunkcja(v, w, x, y, z) { } +var argumenty = [0, 1]; +mojaFunkcja(-1, ...argumenty, 2, ...[3]);</pre> + +<h4 id="Apply_for_new">Apply for new</h4> + +<p>When calling a constructor with <code>new</code>, it's not possible to <strong>directly</strong> use an array and <code>apply</code> (<code>apply</code> does a <code>[[Call]]</code> and not a <code>[[Construct]]</code>). However, an array can be easily used with <code>new</code> thanks to spread syntax:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>To use new with an array of parameters without spread syntax, you would have to do it <strong>indirectly</strong> through partial application:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Rozwinięcie_w_literałach_tablicowych">Rozwinięcie w literałach tablicowych</h3> + +<h4 id="Potężniejszy_literał_tablicowy">Potężniejszy literał tablicowy</h4> + +<p>Bez składni rozwinięcia, aby utworzyć nową tablicę, używając tablicy już istniejącej jako jej części, składnia literału tablicowego nie jest już wystarczająca i musimy użyć kodu imperatywnego, używając kombinacji <code>push</code>, <code>splice</code>, <code>concat</code> itd. Z użyciem składni rozwinięcia staje się to o wiele prostsze i bardziej zwięzłe:</p> + +<pre class="brush: js">var czesci = ['kotek', 'na', 'plotek']; +var wierszyk = ['wlazl', ...czesci, 'i', 'mruga']; +// ["wlazl", "kotek", "na", "plotek", "i", "mruga"] +</pre> + +<p>Tak jak dla list argumentów w wywołaniach funkcji, operator <code>...</code> może być użyty wielokrotnie i w każdym miejscu literału tablicowego.</p> + +<h4 id="Kopia_tablicy">Kopia tablicy</h4> + +<pre class="brush: js">var tab = [1, 2, 3]; +var tab2 = [...tab]; // jak tab.slice() +tab2.push(4); + +// tab2 staje się [1, 2, 3, 4] +// tab pozostaje niezmieniona +</pre> + +<p><strong>Uwaga:</strong> Składnia rozwinięcia skutecznie sięga tylko na jeden poziom wgłąb przy kopiowaniu tablicy. W związku z tym takie podejście może być nieodpowiednie przy kopiowaniu tablic wielowymiarowych, jak pokazuje poniższy przykład (tak samo jest z {{jsxref("Object.assign()")}} i kładnią rozwinięcia).</p> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Tablica a została zmodyfikowana: [[], [2], [3]] +</pre> + +<h4 id="Lepszy_sposób_na_łączenie_tablic">Lepszy sposób na łączenie tablic</h4> + +<p>{{jsxref("Array.concat")}} jest często używane do dołączania elementów jednej tablicy na koniec drugiej. Bez składni rozwinięcia wygląda to tak:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +// Dołącz wszystkie elementy tab2 na koniec tab1 +tab1 = tab1.concat(tab2);</pre> + +<p>Przy użyciu składni rozwinięcia wygląda to natomiast tak:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +tab1 = [...tab1, ...tab2]; +</pre> + +<p>{{jsxref("Array.unshift")}} jest często używane do dołączania elementów jednej tablicy na początek drugiej. Bez składni rozwinięcia wygląda to w następujący sposób:</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +// Dodaj wszystkie elementy tab2 na początek tab1 +Array.prototype.unshift.apply(tab1, tab2) // tab1 staje się [3, 4, 5, 0, 1, 2]</pre> + +<p>Przy użyciu składni rozwinięcia otrzymuje to następującą postać [jednak zauważ, że w tym przypadku utworzona zostaje nowa tablica <code>tab1</code> – w odróżnieniu od {{jsxref("Array.unshift")}}, <code>tab1</code> nie jest automatycznie modyfikowana):</p> + +<pre class="brush: js">var tab1 = [0, 1, 2]; +var tab2 = [3, 4, 5]; +tab1 = [...tab2, ...tab1]; // tab1 staje się [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Rozwinięcie_w_literałach_tablicowych_2">Rozwinięcie w literałach tablicowych</h3> + +<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds spread properties to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>. It copies own enumerable properties from a provided object onto a new object.</p> + +<p>Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Note that {{jsxref("Object.assign()")}} triggers <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> whereas spread syntax doesn't.</p> + +<p>Note that you cannot replace nor mimic the {{jsxref("Object.assign()")}} function:</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>In the above example, the spread syntax does not work as one might expect: it spreads an <em>array</em> of arguments into the object literal, due to the rest parameter.</p> + +<h3 id="Tylko_dla_obiektów_iterowalnych">Tylko dla obiektów iterowalnych</h3> + +<p>Składnia rozwinięcia może być użyta jedynie dla obiektów<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator"> iterowalnych</a>:</p> + +<pre class="brush: js">var obiekt = {'klucz1': 'wartosc1'}; +var tablica = [...obiekt]; // TypeError: obiekt is not iterable +</pre> + +<h3 id="Rozwinięcie_z_wieloma_wartościami">Rozwinięcie z wieloma wartościami</h3> + +<p>Kiedy używaż składni rozwinięcia do wywołań funkcji, musisz być świadomy możliwości przekroczenia limitu liczby argumentów w silniku JavaScript. Po więcej szczegółów zajrzyj do <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code>.</a></p> + +<h2 id="Składnia_reszty_(parametry)">Składnia reszty (parametry)</h2> + +<p>Składnia reszty ang. <em>rest syntax</em>) wygląda dokładnie jak składnia rozwinięcia, ale jest używana do destrukturyzacji tablic i obiektów. W pewnym sensie składnia reszty jest przeciwieństwem składni rozpakowania: rozwinięcie „rozpakowuje” elementy tablicy, natomiast składnia reszty „zbiera” wiele elementów i „pakuje” je do pojedynczego elementu. Zobacz: <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Defined in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (również ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (również ‘<code>...</code>’)</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/super/index.html b/files/pl/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..c217af33e9 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/super/index.html @@ -0,0 +1,171 @@ +--- +title: super +slug: Web/JavaScript/Referencje/Operatory/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <strong>super </strong>jest wykorzystywane do udostępniania i korzystania z funkcji klasy po której nasz obiekt dziedziczy.</p> + +<p>Wyrażenia <code>super.prop</code> i <code>super[expr]</code> są poprawne w każdej definicji metody zarówno w <a href="/pl/docs/Web/JavaScript/Reference/Classes">klasach</a> i <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">literałach obiektowych</a>.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox notranslate">super([arguments]); // wywołuje konstruktor klasy rodzica +super.functionOnParent([arguments]); +</pre> + +<h2 id="Opis">Opis</h2> + +<p>W przypadku użycia w konstruktorze, słowo kluczowe <code>super</code> pojawia się samodzielnie i musi zostać użyte przed użyciem słowa kluczowego <code>this</code> . Słowo kluczowe <code>super</code> można również wykorzystać do wywoływania funkcji które nasz obiekt odziedziczył po swoim rodzicu.</p> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="Użycie_super_w_klasach">Użycie <code>super</code> w klasach</h3> + +<p>Poniższy snippet został pobrany z <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">próbki klasy</a> (live demo). W tym przykładzie, super() jest wywoływane w celu uniknięcia powielania tych części konstruktora, które są wspólne zarówno dla <code>Rectangle</code> (trójkąta) jak i <code>Square</code> (kwadratu).</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.name = 'Rectangle'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } + get area() { + return this.height * this.width; + } + set area(value) { + this._area = value; + } +} + +class Square extends Rectangle { + constructor(length) { + this.height; // ReferenceError, super needs to be called first! + + // Wywołanie konstruktora klasy nadrzędnej + // określenie szerokości i wysokości prostokąta + super(length, length); + // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż + // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia. + this.name = 'Square'; + } +}</pre> + +<h3 id="Super-wywołanie_metod_statycznych">Super-wywołanie metod statycznych</h3> + +<p>Za pomocą <code>super</code> jesteś w stanie także wywołać metody statyczne.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor() {} + static logNbSides() { + return 'I have 4 sides'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ' which are all equal'; + } +} +Square.logDescription(); // 'I have 4 sides which are all equal' +</pre> + +<h3 id="Usuwanie_właściwości_z_super_wyrzuci_błąd">Usuwanie właściwości z super wyrzuci błąd</h3> + +<p>Nie możesz użyć <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_delete">operatora usuwania</a> oraz <code>super.prop</code> bądź <code>super[expr]</code> w celu usunięcia właściwości klasy rodzica ponieważ zostanie zwrócony błąd {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js notranslate">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; // to jest niepoprawnie + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="super.prop_nie_może_nadpisać_właściwości_typu_non-writable"><code>super.prop</code> nie może nadpisać właściwości typu non-writable </h3> + +<p>Definiując właściwości non-writable (niezapisywalne) np. {{jsxref("Object.defineProperty")}}, pamiętaj, że <code>super</code> nie może nadpisać takiej wartości.</p> + +<pre class="brush: js notranslate">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Nie można nadpisać wartości + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" is read-only +console.log(y.prop); // 1 +</pre> + +<h3 id="Używanie_super.prop_w_literałach_obiektowych">Używanie <code>super.prop</code> w literałach obiektowych</h3> + +<p><code>super</code> może być także wykorzystane <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Object_initializer">inicjalizatorze / literale obiektu</a>.</p> + +<p>W tym przykładzie dwa obiekty definiują swoją metodę. W drugim obiekcie, <code>super</code> wywołuje metodę obiektu pierwszego. To działa dzięki {{jsxref("Object.setPrototypeOf()")}} z czym jesteśmy w stanie ustawić prototyp obiektu <code>obj2</code> na <code>obj1</code>, tak aby <code>super</code><span> było w stanie znaleźć metodę </span><code>method1</code><span> </span>w obiekcie <code>obj1</code><span>. </span></p> + +<pre class="brush: js notranslate">var obj1 = { + method1() { + console.log('method 1'); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // wypisze "method 1" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność">Kompatybilność</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/this/index.html b/files/pl/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..523e210cb6 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/this/index.html @@ -0,0 +1,346 @@ +--- +title: this +slug: Web/JavaScript/Referencje/Operatory/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<h2 id="Summary">Summary</h2> + +<p>W JavaScript słówko kluczowe <code>this</code> zachowuje się nieco inaczej w porównaniu do innych języków programowania. Istnieje również kilka różnic między trybem <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> oraz non-strict mode.</p> + +<p>W większości przypadków wartość <code>this</code> jest ustalana na podstawie tego, jak wywołana została dana funkcja. Wartość ta nie może być przypisana podczas wykonywania się funkcji i może być inna za każdym wywołaniem. ES5 wprowadziło metodę <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> dzięki której <a href="#The_bind_method">możemy przypisać wartość <code>this</code> w funkcji, niezależnie od tego jak została ona wywołana.</a></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Global_context">Global context</h2> + +<p>In the global execution context (outside of any function), <code>this</code> refers to the global object, whether in strict mode or not.</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// In web browsers, the window object is also the global object: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<h2 id="Function_context">Function context</h2> + +<p>Inside a function, the value of <code>this</code> depends on how the function is called.</p> + +<h3 id="Simple_call">Simple call</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +f1() === window; // global object +</pre> + +<p>In this case, the value of <code>this</code> is not set by the call. Since the code is not in strict mode, the value of <code>this</code> must always be an object so it defaults to the global object.</p> + +<pre class="brush:js">function f2(){ + "use strict"; // see strict mode + return this; +} + +f2() === undefined; +</pre> + +<p>In strict mode, the value of <code>this</code> remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. It can also be set to any value, such as <code>null</code> or <code>42</code> or <code>"I am not this"</code>.</p> + +<div class="note"><strong>Note:</strong> In the second example, <code>this</code> should be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, because <code>f2</code> was called without providing any base (e.g. <code>window.f2()</code>). This feature wasn't implemented in some browsers when they first started to support <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. As a result, they incorrectly returned the <code>window</code> object.</div> + +<h3 id="As_an_object_method">As an object method</h3> + +<p>When a function is called as a method of an object, its <code>this</code> is set to the object the method is called on.</p> + +<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> + +<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_on_the_objects_prototype_chain"><code>this</code> on the object's prototype chain</h4> + +<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> + +<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> + +<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="As_a_constructor">As a constructor</h3> + +<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to new object being constructed.</p> + +<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> + +<pre class="brush:js">/* + * Constructors work like this: + * + * function MyConstructor(){ + * // Actual function body code goes here. + * // Create properties on |this| as + * // desired by assigning to them. E.g., + * this.fum = "nom"; + * // et cetera... + * + * // If the function has a return statement that + * // returns an object, that object will be the + * // result of the |new| expression. Otherwise, + * // the result of the expression is the object + * // currently bound to |this| + * // (i.e., the common case most usually seen). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> + +<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> + +<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// The first parameter is the object to use as +// 'this', subsequent parameters are passed as +// arguments in the function call +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// The first parameter is the object to use as +// 'this', the second is an array whose +// members are used as the arguments in the function call +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo'), e.g.</code></p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="The_bind_method">The <code>bind</code> method</h3> + +<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var o = {a:37, f:f, g:g}; +console.log(o.f(), o.g()); // 37, azerty +</pre> + +<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> + +<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> + +<pre class="brush:js">// When called as a listener, turns the related element blue +function bluify(e){ + // Always true + console.log(this === e.currentTarget); + // true when currentTarget and target are the same object + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Get a list of every element in the document +var elements = document.getElementsByTagName('*'); + +// Add bluify as a click listener so when the +// element is clicked on, it turns blue +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> + +<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</p> + +<h2 id="Specifications">Specifications</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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/typeof/index.html b/files/pl/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..dfb169a9b5 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,91 @@ +--- +title: Operator typeof +slug: Web/JavaScript/Referencje/Operatory/Operator_typeof +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>typeof</code> używa się na jeden z poniższych sposobów:</p> + +<ol> + <li><code>typeof <em>operand</em> </code></li> + <li><code>typeof (<em>operand</em> )</code></li> +</ol> + +<p>Operator <code>typeof</code> zwraca łańcuch zawierający <span class="comment">type of unevaluated operand: jak przetłumaczyć unevaluated?</span>typ operandu. <code>operand</code> jest łańcuchem znaków, zmienną, słowem kluczowym lub obiektem, którego typ ma zostać zwrócony. Zastosowanie nawiasów jest opcjonalne.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.1</td> + </tr> + <tr> + <td>Wersja ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> + +<p>Zakładamy, że możemy zdefiniować następujące zmienne:</p> + +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> + +<p>Operator <code>typeof</code> zwróci następujący rezultat dla tych zmiennych:</p> + +<pre>typeof myFun is object +typeof shape is string +typeof size is number +typeof today is object +typeof dontExist is undefined +</pre> + +<p>Dla słów kluczowych <code>true</code> oraz <code>null</code>, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof true is boolean +typeof null is object +</pre> + +<p>Dla liczby lub łańcucha znaków, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof 62 is number +typeof 'Hello world' is string +</pre> + +<p>Dla własności wartości, operator <code>typeof</code> zwraca typ wartości własności, jakie składają się na treść:</p> + +<pre>typeof document.lastModified is string +typeof window.length is number +typeof Math.LN2 is number +</pre> + +<p>Dla metod i funkcji, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof blur is function +typeof eval is function +typeof parseInt is function +typeof shape.split is function +</pre> + +<p>Dla obiektów predefiniowanych, operator <code>typeof</code> zwraca następujący rezultat:</p> + +<pre>typeof Date is function +typeof Function is function +typeof Math is function +typeof Option is function +typeof String is function +</pre> diff --git a/files/pl/web/javascript/reference/operators/void/index.html b/files/pl/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..65b3fe8fa2 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/void/index.html @@ -0,0 +1,51 @@ +--- +title: Operator void +slug: Web/JavaScript/Referencje/Operatory/Operator_void +tags: + - Dokumentacja_JavaScript + - Dokumentacje + - JavaScript + - Wszystkie_kategorie +translation_of: Web/JavaScript/Reference/Operators/void +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Operator <code>void</code> może być używany na jeden z dwóch sposobów:</p> + +<ol> + <li><code>void (<em>wyrażenie</em> )</code></li> + <li><code>void <em>wyrażenie</em> </code></li> +</ol> + +<p>Operator <code>void</code> określa wyrażenie, które ma zostać ocenione bez zwracania wartości. <code>wyrażenie</code> jest wyrażeniem JavaScript, które ma zostać ocenione. Nawiasy dookoła wyrażenia są opcjonalne, ale używanie ich jest w dobrym stylu.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Operator</td> + </tr> + <tr> + <td>Zaimplementowany w:</td> + <td>JavaScript 1.1</td> + </tr> + <tr> + <td>Wersja ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> + +<p>Możesz użyć operatora <code>void</code>, aby określić wyrażenie jako hipertekstowy odnośnik. Wyrażenie jest oceniane, ale nie jest ładowane w miejsce aktualnego dokumentu.</p> + +<p>Poniższy kod tworzy hipertekstowy odnośnik, który nie wykonuje nic po kliknięciu go przez użytkownika. Gdy użytkownik kliknie odnośnik, void(0) zostanie oceniony jako 0, jednak nie ma to żadnego efektu w JavaScripcie.</p> + +<pre><a href="javascript:void(0)">Kliknij tutaj, żeby nic się nie stało</a> +</pre> + +<p>Poniższy kod tworzy hipertekstowy odnośnik, który wysyła formularz, gdy zostanie kliknięty przez użytkownika.</p> + +<pre><a href="javascript:void(document.form.submit())"> +Kliknij tutaj, aby wysłać.</a> +</pre> diff --git a/files/pl/web/javascript/reference/operators/yield/index.html b/files/pl/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..8d814a5aa8 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,168 @@ +--- +title: yield +slug: Web/JavaScript/Referencje/Operatory/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Słowo kluczowe <code>yield</code> jest używane do zatrzymania i powrotu funkcji generatora ({{jsxref("Statements/function*", "function*")}} lub <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Definiuje wartość która ma być zwrócona przez funkcję generatora przez <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">the iterator protocol</a>, jeżeli pominięte, zostanie zwrócone <code>undefined</code>.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Zwraca opcjonalną wartość przekazaną do metody next() generatora, do powrotu do jej wykonania.</p> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>yield</code> keyword causes generator function execution to pause and the value of the expression following the <code>yield</code> keyword is returned to the generator's caller. It can be thought of as a generator-based version of the <code>return</code> keyword.</p> + +<p>The <code>yield</code> keyword actually returns an <code>IteratorResult</code> object with two properties, <code>value</code> and <code>done</code>. The <code>value</code> property is the result of evaluating the <code>yield</code> expression, and <code>done</code> is <code>false</code>, indicating that the generator function has not fully completed.</p> + +<p>Once paused on a <code>yield</code> expression, the generator's code execution remains paused until the generator's <code>next()</code> method is called. Each time the generator's <code>next()</code> method is called, the generator resumes execution and runs until it reaches one of the following:</p> + +<ul> + <li> A <code>yield</code>, which causes the generator to once again pause and return the generator's new value. The next time <code>next()</code> is called, execution resumes with the statement immediately after the <code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} is used to throw an exception from the generator. This halts execution of the generator entirely, and execution resumes in the caller as is normally the case when an exception is thrown.</li> + <li>The end of the generator function is reached; in this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is {{jsxref("undefined")}} and <code>done</code> is <code>true</code>.</li> + <li>A {{jsxref("Statements/return", "return")}} statement is reached. In this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is the value specified by the <code>return</code> statement and <code>done</code> is <code>true</code>.</li> +</ul> + +<p>If an optional value is passed to the generator's <code>next()</code> method, that value becomes the value returned by the generator's current <code>yield</code> operation.</p> + +<p>Between the generator's code path, its <code>yield</code> operators, and the ability to specify a new starting value by passing it to {{jsxref("Generator.prototype.next()")}}, generators offer enormous power and control.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following code is the declaration of an example generator function.</p> + +<pre class="brush: js">function* foo() { + var index = 0; + while (index <= 2) + yield index++; +}</pre> + +<p>Once a generator function is defined, it can be used by constructing an iterator as shown.</p> + +<pre class="brush: js">var iterator = foo(); +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/pl/web/javascript/reference/operators/yield_star_/index.html b/files/pl/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..ddef530622 --- /dev/null +++ b/files/pl/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,200 @@ +--- +title: yield* +slug: Web/JavaScript/Referencje/Operatory/yield* +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong><code>Wyrażenie yield*</code> </strong> służy do wydelegowania działania generatora do innego {{jsxref("Statements/function*", "generatora")}} lub obiektu iterowalnego.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + +<p class="hidden">Źródło poniższego interaktywnego przykładu przechowywane jest w repozytorium na GitHub. Jeśli chcesz współtworzyć projekt interaktywnych przykładów, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Wyrażenie, które zwraca iterowalny obiekt lub generator.</dd> +</dl> + +<h2 id="Opis">Opis</h2> + +<p><code>yield*</code> iteruje po iterowalnym obiekcie i wywołuje <code>yield</code> z każdą kolejną zwracaną przez niego wartością.</p> + +<p>Wartość samego <code>yield*</code> jest wartością zwróconą przez iterator w momencie jego zakończenia (tzn. kiedy <code>done</code> ma wartość <code>true</code>).</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Delegowanie_logiki_do_osobnego_generatora">Delegowanie logiki do osobnego generatora</h3> + +<p>W poniższym kodzie wartości <code>yeld</code> dla <code>g1()</code> zwracane są przy wywołaniu <code>next()</code> dokładnie tak samo jak te, które zwraca <code>yeld</code> generatora <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: 4, done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Inne_obiekty_iterowalne">Inne obiekty iterowalne</h3> + +<p><code>yield*</code> może wywoływać <code>yield</code> z wartościami dostarczanymi przez inne rodzje obiektów iterowalnych , np. tablice, stringi lub obiekt <code>arguments</code>.</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* '34'; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: "3", done: false} +console.log(iterator.next()); // {value: "4", done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: 6, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Wartość_samego_wyrażenia_yield*">Wartość samego wyrażenia <code>yield*</code></h3> + +<p><code>yield*</code> jest wyrażeniem (expression) a nie statement, więc rozwiązuje się do konkretnej wartości.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return 'foo'; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: undefined, done: true}, + // g4() zwrócił w tym momencie {value: 'foo', done: true} + +console.log(result); // "foo" +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the yield expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The line terminator restriction is now implemented. No line terminator between "yield" and "*" is allowed. Code like the following will throw a {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> |