aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/javascript/reference/global_objects/function/bind/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
commitde5c456ebded0e038adbf23db34cc290c8829180 (patch)
tree2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/web/javascript/reference/global_objects/function/bind/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip
unslug pl: move
Diffstat (limited to 'files/pl/web/javascript/reference/global_objects/function/bind/index.html')
-rw-r--r--files/pl/web/javascript/reference/global_objects/function/bind/index.html332
1 files changed, 332 insertions, 0 deletions
diff --git a/files/pl/web/javascript/reference/global_objects/function/bind/index.html b/files/pl/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..028db6b6d4
--- /dev/null
+++ b/files/pl/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,332 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Referencje/Obiekty/Function/bind
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}<br>
+Metoda <span class="seoSummary"><code><strong>bind()</strong></code> </span> tworzy nową funkcję, której wywołanie powoduje ustawienie <strong>this</strong> na podaną wartość, z podaną sekwencją argumentów poprzedzającą dowolną podaną podczas wywołania nowej funkcji.<br>
+ </div>
+
+<div>{{EmbedInteractiveExample („pages / js / function-bind.html”, „taller”)}}<br>
+Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do projektu interaktywnych przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam prośbę o pobranie.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">let boundFunc = <var>func</var>.bind(thisAtr[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])
+</pre>
+
+<h3 id="Parametry">Parametry</h3>
+
+<dl>
+ <dt><code><var>thisAtr</var></code></dt>
+ <dd>Wartość, która ma być przekazana jako <strong>this</strong> do funkcji docelowej func po wywołaniu funkcji powiązanej. Wartość jest ignorowana, jeśli funkcja powiązana jest konstruowana przy użyciu operatora {{jsxref („Operators / new”, „new”)}}. Podczas używania funkcji <strong>bind</strong> do utworzenia funkcji (dostarczonej jako wywołanie zwrotne) wewnątrz setTimeout, każda prymitywna wartość przekazywana, gdy <strong>thisAtr</strong> jest konwertowany na obiekt. Jeśli nie podano żadnych argumentów, aby powiązać (bind), lub jeśli thisArg jest <strong>null</strong> lub <strong>undefined</strong>, <strong>this</strong> z zakresu wykonania jest traktowany jako <strong>thisAtr</strong> dla nowej funkcji.</dd>
+ <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt>
+ <dd>Argumenty poprzedzające argumenty dostarczone funkcji powiązanej podczas wywoływania func.</dd>
+</dl>
+
+<h3 id="Zwracana_wartość">Zwracana wartość</h3>
+
+<p>Kopia podanej funkcji z podaną tą wartością i początkowymi argumentami (jeśli podano).</p>
+
+<h2 id="Opis">Opis</h2>
+
+<p>Funkcja <strong>bind</strong>() tworzy nową funkcję wiązania (bound function), która jest exotic function object (termin z ECMAScript 2015), który zawija oryginalny obiekt funkcji. Wywołanie funkcji powiązanej zazwyczaj skutkuje wykonaniem jej owrapowanej funkcji.</p>
+
+<p>Funckja wiązania <strong>(bound function)</strong> ma następujące właściwości wewnętrzne:</p>
+
+<dl>
+ <dt><strong><code>[[BoundTargetFunction]]</code> </strong></dt>
+ <dd>The wrapped function object</dd>
+ <dt><code><strong>[[BoundThis]]</strong></code></dt>
+ <dd>The value that is always passed as <code>this</code> value when calling the wrapped function.</dd>
+ <dt><code><strong>[[BoundArguments]]</strong></code></dt>
+ <dd>A list of values whose elements are used as the first arguments to any call to the wrapped function.</dd>
+ <dt><code><strong>[[Call]]</strong></code></dt>
+ <dd>Executes code associated with this object. Invoked via a function call expression. The arguments to the internal method are a <code>this</code> value and a list containing the arguments passed to the function by a call expression.</dd>
+</dl>
+
+<p>When a bound function is called, it calls internal method <code>[[Call]]</code> on <code>[[BoundTargetFunction]]</code>, with following arguments <code>Call(<var>boundThis</var>, ...<var>args</var>)</code>. Where <code><var>boundThis</var></code> is <code>[[BoundThis]]</code>, <code><var>args</var></code> is <code>[[BoundArguments]]</code>, followed by the arguments passed by the function call.</p>
+
+<p>A bound function may also be constructed using the {{jsxref("Operators/new", "new")}} operator. Doing so acts as though the target function had instead been constructed. The provided <code>this</code> value is ignored, while prepended arguments are provided to the emulated function.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Creating_a_bound_function">Creating a bound function</h3>
+
+<p>The simplest use of <code>bind()</code> is to make a function that, no matter how it is called, is called with a particular <code>this</code> value.</p>
+
+<p>A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its <code>this</code> (e.g., by using the method in callback-based code).</p>
+
+<p>Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:</p>
+
+<pre class="brush: js notranslate">this.x = 9; // 'this' refers to global 'window' object here in a browser
+const module = {
+ x: 81,
+ getX: function() { return this.x; }
+};
+
+module.getX();
+// returns 81
+
+const retrieveX = module.getX;
+retrieveX();
+// returns 9; the function gets invoked at the global scope
+
+// Create a new function with 'this' bound to module
+// New programmers might confuse the
+// global variable 'x' with module's property 'x'
+const boundGetX = retrieveX.bind(module);
+boundGetX();
+// returns 81
+</pre>
+
+<p><strong>Funkcje częściowo zastosowane</strong><br>
+ Kolejnym najprostszym zastosowaniem bind () jest utworzenie funkcji z wcześniej określonymi argumentami początkowymi.</p>
+
+<p>Argumenty te (jeśli występują) są zgodne z podaną wartością, a następnie są wstawiane na początku argumentów przekazywanych do funkcji docelowej, a następnie wszelkie argumenty przekazywane funkcja powiązana w momencie jej wywołania.</p>
+
+<pre class="brush: js notranslate">function list() {
+ return Array.prototype.slice.call(arguments);
+}
+
+function addArguments(arg1, arg2) {
+ return arg1 + arg2
+}
+
+const list1 = list(1, 2, 3);
+// [1, 2, 3]
+
+const result1 = addArguments(1, 2);
+// 3
+
+// Create a function with a preset leading argument
+const leadingThirtysevenList = list.bind(null, 37);
+
+// Create a function with a preset first argument.
+const addThirtySeven = addArguments.bind(null, 37);
+
+const list2 = leadingThirtysevenList();
+// [37]
+
+const list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+
+const result2 = addThirtySeven(5);
+// 37 + 5 = 42
+
+const result3 = addThirtySeven(5, 10);
+// 37 + 5 = 42
+// (the second argument is ignored)
+
+
+</pre>
+
+<h3 id="With_setTimeout">With <code>setTimeout()</code></h3>
+
+<p>By default within <a href="/en-US/docs/Web/API/Window/setTimeout" title="REDIRECT WindowTimers.setTimeout"><code>window.setTimeout()</code></a>, the <code>this</code> keyword will be set to the <a href="/en-US/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> (or <code>global</code>) object. When working with class methods that require <code>this</code> to refer to class instances, you may explicitly bind <code>this</code> to the callback function, in order to maintain the instance.</p>
+
+<pre class="brush: js notranslate">function LateBloomer() {
+ this.petalCount = Math.floor(Math.random() * 12) + 1;
+}
+
+// Declare bloom after a delay of 1 second
+LateBloomer.prototype.bloom = function() {
+ window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+ console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
+};
+
+const flower = new LateBloomer();
+flower.bloom();
+// after 1 second, calls 'flower.declare()'
+</pre>
+
+<h3 id="Funkcje_powiązane_używane_jako_kostruktory">Funkcje powiązane używane jako kostruktory</h3>
+
+<div class="warning">
+<p>Ostrzeżenie: ta sekcja pokazuje możliwości JavaScript i dokumentuje niektóre przypadki krawędzi metody bind ().</p>
+
+<p>Metody przedstawione poniżej nie są najlepszym sposobem na robienie rzeczy i prawdopodobnie nie powinny być stosowane w żadnym środowisku produkcyjnym.</p>
+</div>
+
+<p>Funkcje powiązane są automatycznie odpowiednie do użycia z operatorem {{jsxref („Operators / new”, „new”)}} do tworzenia nowych instancji utworzonych przez funkcję docelową. Gdy do utworzenia wartości używana jest funkcja powiązana, pod warunkiem, że jest to ignorowane.</p>
+
+<p>Jednak pod warunkiem, że argumenty są nadal dołączane do wywołania konstruktora:</p>
+
+<pre class="brush: js notranslate">function Point(x, y) {
+ this.x = x;
+ this.y = y;
+}
+
+Point.prototype.toString = function() {
+ return `${this.x},${this.y}`;
+};
+
+const p = new Point(1, 2);
+p.toString();
+// '1,2'
+
+
+// not supported in the polyfill below,
+
+// works fine with native bind:
+
+const YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+const emptyObj = {};
+const YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+const axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new YAxisPoint(17, 42) instanceof Point; // true
+</pre>
+
+<p>Zauważ, że nie musisz robić nic specjalnego, aby utworzyć powiązaną funkcję do użycia z {{jsxref („Operators / new”, „new”)}}.</p>
+
+<p>Następstwem jest to, że nie musisz robić nic specjalnego, aby utworzyć funkcję powiązaną, która będzie wywoływana w sposób jawny, nawet jeśli wolisz, aby funkcja powiązana była wywoływana tylko za pomocą {{jsxref („Operators / new”, „new”)}} .</p>
+
+<pre class="brush: js notranslate">// Example can be run directly in your JavaScript console
+// ...continued from above
+
+// Can still be called as a normal function
+// (although usually this is undesired)
+YAxisPoint(13);
+
+`${emptyObj.x},${emptyObj.y}`;
+// &gt; '0,13'
+</pre>
+
+<p>If you wish to support the use of a bound function only using {{jsxref("Operators/new", "new")}}, or only by calling it, the target function must enforce that restriction.</p>
+
+<h3 id="Tworzenie_skrótów">Tworzenie skrótów</h3>
+
+<p>bind () jest również pomocny w przypadkach, w których chcesz utworzyć skrót do funkcji, która wymaga podania tej wartości.</p>
+
+<p>Weźmy na przykład {{jsxref ("Array.prototype.slice ()")}}, którego chcesz użyć do konwersji obiektu podobnego do tablicy na prawdziwą tablicę. Możesz utworzyć taki skrót:</p>
+
+<pre class="brush: js notranslate">const slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p>Za pomocą bind () można to uprościć.</p>
+
+<p>W poniższym fragmencie kodu slice () jest funkcją powiązaną z funkcją {{jsxref („Function.prototype.apply ()”, „Apply ()”)}} z {{jsxref („Function.prototype”) }}, z tą wartością ustawioną na {{jsxref („Array.prototype.slice ()”, „slice ()”)}} funkcji {{jsxref („Array.prototype”)}}. Oznacza to, że dodatkowe wywołania apply () można wyeliminować:</p>
+
+<pre class="brush: js notranslate">// same as "slice" in the previous example
+const unboundSlice = Array.prototype.slice;
+const slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<p>Polyfill<br>
+ Ponieważ starsze przeglądarki są na ogół również wolniejszymi przeglądarkami, jest to o wiele bardziej krytyczne niż większość ludzi rozpoznaje tworzenie polifillów wydajności, aby przeglądanie w przestarzałych przeglądarkach było nieco mniej straszne.</p>
+
+<p>W związku z tym poniżej przedstawiono dwie opcje dla funkcji wypełniania funkcji Function.prototype.bind ():</p>
+
+<p>Pierwszy jest znacznie mniejszy i bardziej wydajny, ale nie działa, gdy używasz nowego operatora.<br>
+ Drugi jest większy i mniej wydajny, ale pozwala na pewne użycie nowego operatora na powiązanych funkcjach.<br>
+ Zasadniczo w większości kodów bardzo rzadko widuje się nowe używane w funkcji powiązanej, więc najlepiej jest wybrać pierwszą opcję.</p>
+
+<pre class="brush: js notranslate">// Does not work with `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+ var slice = Array.prototype.slice;
+ Function.prototype.bind = function() {
+ var thatFunc = this, thatArg = arguments[0];
+ var args = slice.call(arguments, 1);
+ if (typeof thatFunc !== 'function') {
+ // closest thing possible to the ECMAScript 5
+ // internal IsCallable function
+ throw new TypeError('Function.prototype.bind - ' +
+ 'what is trying to be bound is not callable');
+ }
+ return function(){
+ var funcArgs = args.concat(slice.call(arguments))
+ return thatFunc.apply(thatArg, funcArgs);
+ };
+ };
+})();</pre>
+
+<p>Możesz częściowo obejść ten problem, wstawiając następujący kod na początku skryptów, umożliwiając korzystanie z większości funkcji bind () w implementacjach, które nie obsługują go natywnie.</p>
+
+<pre class="brush: js notranslate">// Yes, it does work with `new funcA.bind(thisArg, args)`
+if (!Function.prototype.bind) (function(){
+ var ArrayPrototypeSlice = Array.prototype.slice;
+ Function.prototype.bind = function(otherThis) {
+ if (typeof this !== 'function') {
+ // closest thing possible to the ECMAScript 5
+ // internal IsCallable function
+ throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+ }
+
+ var baseArgs= ArrayPrototypeSlice .call(arguments, 1),
+ baseArgsLength = baseArgs.length,
+ fToBind = this,
+ fNOP = function() {},
+ fBound = function() {
+ baseArgs.length = baseArgsLength; // reset to default base arguments
+ baseArgs.push.apply(baseArgs, arguments);
+ return fToBind.apply(
+ fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
+ );
+ };
+
+ if (this.prototype) {
+ // Function.prototype doesn't have a prototype property
+ fNOP.prototype = this.prototype;
+ }
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
+})();
+</pre>
+
+<p>Niektóre z wielu różnic (mogą być też inne, ponieważ ta lista nie próbuje być wyczerpująca) między tym algorytmem a określonym algorytmem to:</p>
+
+<p>Częściowa implementacja opiera się na {{jsxref ("Array.prototype.slice ()")}}, {{jsxref ("Array.prototype.concat ()")}}, {{jsxref ("Function.prototype.call ( ) ")}} i {{jsxref (" Function.prototype.apply () ")}}, wbudowane metody mające swoje oryginalne wartości.<br>
+ Częściowa implementacja tworzy funkcje, które nie mają niezmiennej „pigułki trucizny” {{jsxref („Function.caller”, „caller”)}} i właściwości argumentów, które wyrzucają {{jsxref („Global_Objects / TypeError”, „TypeError”) }} przy pobieraniu, ustawianiu lub usuwaniu. (Można to dodać, jeśli implementacja obsługuje {{jsxref („Object.defineProperty”)}} lub częściowo zaimplementowana [bez zachowania polegającego na rzucaniu przy usuwaniu], jeśli implementacja obsługuje {{jsxref („Object .__ zdefiniujGetter__”, „ __defineGetter__ ”)}} i {{jsxref („ Object .__ definiSetter__ ”,„ __defineSetter__ ”)}}).<br>
+ Częściowa implementacja tworzy funkcje, które mają właściwość prototypu. (Właściwie powiązane funkcje nie mają żadnych.)<br>
+ Częściowa implementacja tworzy powiązane funkcje, których właściwość {{jsxref („Function.length”, „length”)}}} nie zgadza się z właściwością nakazaną przez ECMA-262: tworzy funkcje o długości 0. Pełna implementacja - w zależności od długość funkcji docelowej i liczba wcześniej określonych argumentów - może zwrócić niezerową długość.<br>
+ Częściowa implementacja tworzy powiązane funkcje, których właściwość {{jsxref („Function.name”, „name”)}} nie jest pochodną oryginalnej nazwy funkcji. Według ECMA-262 nazwa zwróconej funkcji powiązanej powinna być „związana” + nazwa funkcji docelowej.<br>
+ Jeśli zdecydujesz się użyć tej częściowej implementacji, nie możesz polegać na przypadkach, w których zachowanie odbiega od ECMA-262, wydanie 5! Na szczęście te odchylenia od specyfikacji rzadko (jeśli w ogóle) pojawiają się w większości sytuacji kodowania. Jeśli nie rozumiesz żadnego z odchyleń od powyższej specyfikacji, w tym konkretnym przypadku można bezpiecznie nie martwić się o te niezgodne szczegóły odchylenia.</p>
+
+<p>Jeśli jest to absolutnie konieczne, a wydajność nie stanowi problemu, znacznie wolniejsze (ale bardziej zgodne ze specyfikacją rozwiązanie) można znaleźć na stronie https://github.com/Raynos/function-bind.</p>
+
+<h2 id="Dane_techniczne">Dane techniczne</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h5 id="Kompatybilność_z_przeglądarkami_Tabela_zgodności_na_tej_stronie_jest_generowana_z_danych_strukturalnych._Jeśli_chcesz_przyczynić_się_do_danych_sprawdź_httpsgithub.commdnbrowser-compat-data_i_wyślij_nam_żądanie_ściągnięcia._Compat_javascript.builtins.Function.bind">Kompatybilność z przeglądarkami<br>
+ Tabela zgodności na tej stronie jest generowana z danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź https://github.com/mdn/browser-compat-data i wyślij nam żądanie ściągnięcia.<br>
+ {{Compat ("javascript.builtins.Function.bind")}}</h5>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+</ul>