diff options
Diffstat (limited to 'files/pl/web/javascript/reference/functions/arrow_functions/index.html')
| -rw-r--r-- | files/pl/web/javascript/reference/functions/arrow_functions/index.html | 356 |
1 files changed, 356 insertions, 0 deletions
diff --git a/files/pl/web/javascript/reference/functions/arrow_functions/index.html b/files/pl/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..da3259ac37 --- /dev/null +++ b/files/pl/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,356 @@ +--- +title: Funkcje strzałkowe +slug: Web/JavaScript/Reference/Functions/Arrow_functions +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Reference/Functions/Funkcje_strzalkowe +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>Funkcja strzałkowa </strong>ma krótszą składnię niż <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">zwykłe wyrażenie funkcji</a> oraz nie posiada własnego <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argumentów</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>, tudzież właściwości <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Taki sposób wyrażenia funkcji najlepiej wykorzystać przy tworzeniu funkcji bez metod, ponadto nie mogą zostać one użyte jako konstruktory.</p> + +<h2 id="Składnia">Składnia</h2> + +<h3 id="Składnia_podstawowa">Składnia podstawowa</h3> + +<pre class="syntaxbox"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> +// inaczej mówiąc: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> => { return <em>expression</em>; } + +// Nawiasy są opcjonalne jeżeli występuje wyłącznie jedna nazwa parametru: +<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> +<em>singleParam</em> <strong>=></strong> { <em>statements </em>} +<em>singleParam</em> <strong>=></strong> <em>expression</em> + + +// Lista parametrów dla funkcji bez parametrów powinna być zapisana przy użyciu pustego nawiasu. +() => { <em>statements</em> } +</pre> + +<h3 id="Zaawansowana_składnia">Zaawansowana składnia</h3> + +<pre class="syntaxbox">// Otoczenie ciała funkcji nawiasami pozwoli zwrócić tzw. object literal expression: +<em>params</em> => ({<em>foo: bar</em>}) + +// Parametry Rest (<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a>) i domyślne (<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a>) są wspierane +(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } +(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } + +// Destrukturyzacja (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring</a>) w ramach listy parametrów jest również wspierana +let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); +// 6 +</pre> + +<h2 id="Opis">Opis</h2> + +<p>Zobacz również <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" na hacks.mozilla.org</a>.</p> + +<p>Dwa czynniki, które wpłynęły na wprowadzenie funkcji strzałkowych: krótszy zapis funkcji i brak wiązania <code>this</code>.</p> + +<h3 id="Krótsze_funkcje">Krótsze funkcje</h3> + +<pre class="brush: js">var materials = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(material) { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>((material) => { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(material => material.length); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="Brak_oddzielnego_this">Brak oddzielnego <code>this</code></h3> + +<p>Przed wprowadzeniem funkcji strzałkowych każda nowa funkcja deniniowała swoją własną wartość <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (nowy obiekt w przypadku konstruktora, undefined w wywołaniach funkcji <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, obiekt bazowy jeśli funkcja jest wywoływana jako "metoda obiektowa", itp.). Okazało się to niekorzystne przy obiektowym stylu programowania.</p> + +<pre class="brush: js">function Person() { + // Konstruktor Person() definiuje `this` jako instancję samego siebie. + this.age = 0; + + setInterval(function growUp() { + // Bez trybu non-strict, funkcja growUp() definuje `this` + // jako obiekt globalny, który jest inny od `this` + // zdefiniowanego przez konstruktor Person(). + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>W ECMAScript 3/5, problem z <code>this</code> można było rozwiązać przez przydzielenie wartości <code>this</code> do zmiennej, która wygląda bardzo podobnie.</p> + +<pre class="brush: js">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // The callback refers to the `that` variable of which + // the value is the expected object. + that.age++; + }, 1000); +}</pre> + +<p>Można było również stworzyć <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">funkcję bound</a>, co pozwoliło nadać wstępnie przypisaną wartość <code>this</code> do powiązanej funkcji docelowej (funkcja <code>growUp()</code> w przykładzie powyżej).</p> + +<p>Funkcja strzałkowa nie posiada własnego <code>this</code>; używana jest wartość <code>this</code> kontekstu wykonania. W związku z tym, w poniższym kodzie, <code>this</code> użyty w funkcji, który jest przekazywany do <code>setInterval</code>, ma taką samą wartość jak <code>this</code> w funkcji otaczającej:</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // własność |this| właściwie odnosi się do obiektu Person() + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Relation_with_strict_mode">Relation with strict mode</h4> + +<p>Given that <code>this</code> comes from the surrounding lexical context, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> rules with regard to <code>this</code> are ignored.</p> + +<pre class="brush: js">var f = () => { 'use strict'; return this; }; +f() === window; // or the global object</pre> + +<p>All other strict mode rules apply normally.</p> + +<h4 id="Invoked_through_call_or_apply">Invoked through call or apply</h4> + +<p>Since arrow functions do not have their own <code>this</code>, the methods <code>call()</code> or <code>apply()</code> can only pass in parameters. <code>thisArg</code> is ignored.</p> + +<pre class="brush: js">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="No_binding_of_arguments">No binding of <code>arguments</code></h3> + +<p>Arrow functions do not have their own <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> object</a>. Thus, in this example, <code>arguments</code> is simply a reference to the the arguments of the enclosing scope:</p> + +<pre class="brush: js">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(10); +} + +foo(1); // 2</pre> + +<p>In most cases, using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> is a good alternative to using an <code>arguments</code> object.</p> + +<pre class="brush: js">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Arrow_functions_used_as_methods">Arrow functions used as methods</h3> + +<p>As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:</p> + +<pre class="brush: js">'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</pre> + +<p>Arrow functions do not have their own <code>this</code>. Another example involving {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Use_of_the_new_operator">Use of the <code>new</code> operator</h3> + +<p>Arrow functions cannot be used as constructors and will throw an error when used with <code>new</code>.</p> + +<pre class="brush: js">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="Use_of_prototype_property">Use of <code>prototype</code> property</h3> + +<p>Arrow functions do not have a <code>prototype</code> property.</p> + +<pre class="brush: js">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Use_of_the_yield_keyword">Use of the <code>yield</code> keyword</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.</p> + +<h2 id="Function_body">Function body</h2> + +<p>Arrow functions can have either a "concise body" or the usual "block body".</p> + +<p>In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit <code>return</code> statement.</p> + +<pre class="brush: js">var func = x => x * x; +// concise body syntax, implied "return" + +var func = (x, y) => { return x + y; }; +// with block body, explicit "return" needed +</pre> + +<h2 id="Returning_object_literals">Returning object literals</h2> + +<p>Keep in mind that returning object literals using the concise body syntax <code>params => {object:literal}</code> will not work as expected.</p> + +<pre class="brush: js">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. <code>foo</code> is treated like a label, not a key in an object literal).</p> + +<p>Remember to wrap the object literal in parentheses.</p> + +<pre class="brush: js">var func = () => ({foo: 1});</pre> + +<h2 id="Line_breaks">Line breaks</h2> + +<p>An arrow function cannot contain a line break between its parameters and its arrow.</p> + +<pre class="brush: js">var func = () + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<h2 id="Parsing_order">Parsing order</h2> + +<p>Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a> compared to regular functions.</p> + +<pre class="brush: js">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="More_examples">More examples</h2> + +<pre class="brush: js">// An empty arrow function returns undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (this is an Immediately Invoked Function Expression +// see 'IIFE' in glossary) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// More concise promise chains +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Parameterless arrow functions that are visually easier to parse +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</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('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> |