diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/function/bind/index.html')
| -rw-r--r-- | files/uk/web/javascript/reference/global_objects/function/bind/index.html | 329 |
1 files changed, 0 insertions, 329 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/function/bind/index.html b/files/uk/web/javascript/reference/global_objects/function/bind/index.html deleted file mode 100644 index 9270baeac2..0000000000 --- a/files/uk/web/javascript/reference/global_objects/function/bind/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Function.prototype.bind() -slug: Web/JavaScript/Reference/Global_Objects/Function/bind -tags: - - ECMAScript 2015 - - Function - - JavaScript - - Method - - Зв'язування - - Функція - - метод -translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind ---- -<div>{{JSRef}}</div> - -<p>Метод <code><strong>bind()</strong></code> створює нову функцію, яка в момент виклику має певне присвоєне значення <code>this</code>, а також задану послідовність аргументів, що передують будь-яким аргументам, переданим під час виклику нової функції.</p> - -<p>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</p> - -<div class="hidden"> -<p>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.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox"><var>function</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> - -<h3 id="Параметри">Параметри</h3> - -<dl> - <dt><code>thisArg</code></dt> - <dd>Значення, що передаватиметься як параметр <code>this</code> до цільової функції, коли зв'язана функція викликається. Це значення ігнорується, якщо зв'язана функція утворена викликом оператора {{jsxref("Operators/new", "new")}}. При використанні <code>bind</code> для створення функції (що подається для зворотного виклику) всередині <code>setTimeout</code>, будь-яке примітивне значення, що передається в якості <code>thisArg</code>, перетворюється на об'єкт. Якщо у <code>bind</code> не було передано жодних аргументів, <code>this</code> області видимості виконання передається як <code>thisArg</code> для нової функції.</dd> - <dt><code>arg1, arg2, ...</code></dt> - <dd>Аргументи, які будуть передувати аргументам, що були передані у зв'язану функцію, під час виклику цільової функції.</dd> -</dl> - -<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> - -<p>Копія заданої функції із заданим значенням <strong><code>this</code></strong> та початковими аргументами.</p> - -<h2 id="Опис">Опис</h2> - -<p>Функція <code>bind()</code> створює нову зв'язану функцію, яка є екзотичним об'єктом-функцією (термін з ECMAScript 2015), що огортає початкову функцію. Загалом, результатом виклику зв'язаної функції є виконання функції, яку вона огортає.</p> - -<p>Зв'язана функція має наступні внутрішні властивості:</p> - -<ul> - <li><strong><code>[[BoundTargetFunction]]</code> </strong>- обгорнена функція;</li> - <li><code><strong>[[BoundThis]]</strong></code> - значення, яке завжди передається як значення <code>this</code><strong>,</strong> коли викликається обгорнена функція.</li> - <li><code><strong>[[BoundArguments]]</strong></code> - список значень, елементи якого використовуються як перші аргументи будь-якого виклику обгорненої функції.</li> - <li><code><strong>[[Call]]</strong></code> - виконує код, що пов'язаний з цим об'єктом. Запускається виразом виклику функції. Аргументами внутрішнього методу є значення <strong>this</strong> та список, що містить аргументи, передані у функцію виразом виклику.</li> -</ul> - -<p>Коли зв'язана функція викликається, вона викликає внутрішній метод <code>[[Call]]</code> на об'єкті <code>[[BoundTargetFunction]]</code> з наступними аргументами <code>Call(<em>boundThis</em>, <em>args</em>)</code>. Де <em><code>boundThis</code></em> - це <code>[[BoundThis]]</code>, а <code>args</code> - це <code>[[BoundArguments]]</code>, за якими йдуть аргументи, передані викликом функції.</p> - -<p>Зв'язана функція може також бути створена за допомогою оператора {{jsxref("Operators/new", "new")}}: це працює так, якби замість неї створювалася б цільова функція. Передане значення <code>this</code> ігнорується, а передані аргументи передаються до імітованої функції.</p> - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Створення_звязаної_функції">Створення зв'язаної функції</h3> - -<p>Найпростіше використання методу <code>bind()</code> - це зробити функцію, яка, незалежно від того, як вона викликається, буде викликатися з конкретним значенням <code>this</code>. Загальною помилкою початківців у JavaScript є витягнути метод з об'єкта, пізніше викликати цю функцію і очікувати, що вона буде використовувати початковий об'єкт в якості <code>this</code> (наприклад, використовуючи цей метод в коді на основі зворотних викликів). Однак, початковий об'єкт, якщо його не відслідковувати, зазвичай, втрачається. Створення зв'язаної функції з функції, яка використовує початковий об'єкт, елегантно вирішує цю проблему:</p> - -<pre class="brush: js">this.x = 9; // тут значення this посилається на глобальний об'єкт переглядача "window" -var module = { - x: 81, - getX: function() { return this.x; } -}; - -module.getX(); // 81 - -var retrieveX = module.getX; -retrieveX(); -// вертає 9 - Функція виконується в глобальній області видимості - -// Створюємо нову функцію, прив'язуючи 'this' до об'єкта module -// Програмісти-новачки можуть переплутати -// глобальну змінну var x з властивістю x об'єкта module -var boundGetX = retrieveX.bind(module); -boundGetX(); // 81 -</pre> - -<h3 id="Частково_застосовані_функції">Частково застосовані функції</h3> - -<p>Наступне найпростіше використання методу <code>bind()</code> - це зробити функцію з наперед визначеними початковими аргументами. Ці аргументи (якщо вони є) вказуються після наданого значення <code>this</code> і після цього передаються на початку списку аргументів, які передаються в дану функцію. За ними йдуть аргументи, передані у зв'язану функцію під час виклику.</p> - -<pre class="brush: js">function list() { - return Array.prototype.slice.call(arguments); -} - -function addArguments(arg1, arg2) { - return arg1 + arg2 -} - -var list1 = list(1, 2, 3); // [1, 2, 3] - -var result1 = addArguments(1, 2); // 3 - -// Створити функцію з попередньо заданим першим аргументом -var leadingThirtysevenList = list.bind(null, 37); - -// Створити функцію з попередньо заданим першим аргументом. -var addThirtySeven = addArguments.bind(null, 37); - -var list2 = leadingThirtysevenList(); -// [37] - -var list3 = leadingThirtysevenList(1, 2, 3); -// [37, 1, 2, 3] - -var result2 = addThirtySeven(5); -// 37 + 5 = 42 - -var result3 = addThirtySeven(5, 10); -// 37 + 5 = 42, другий аргумент ігнорується</pre> - -<h3 id="З_setTimeout">З <code>setTimeout</code></h3> - -<p>За замовчуванням, всередині {{domxref("WindowTimers/setTimeout", "window.setTimeout()")}} значенням <code>this</code> буде встановлено об'єкт {{domxref("window")}} (або <code>global</code>). Працюючи з методами класу, що вимагають <code>this</code> для посилання на екземпляри класу, ви можете явно прив'язати <code>this</code> до функції зворотного виклику, щоб зберегти екземпляр.</p> - -<pre class="brush: js">function LateBloomer() { - this.petalCount = Math.ceil(Math.random() * 12) + 1; -} - -// Запустити declare після затримки у 1 секунду -LateBloomer.prototype.bloom = function() { - window.setTimeout(this.declare.bind(this), 1000); -}; - -LateBloomer.prototype.declare = function() { - console.log('Я чудова квітка з ' + - this.petalCount + ' пелюстками!'); -}; - -var flower = new LateBloomer(); -flower.bloom(); -// через 1 секунду запускається метод 'declare'</pre> - -<h3 id="Звязані_функції_в_ролі_конструкторів">Зв'язані функції в ролі конструкторів</h3> - -<div class="warning"> -<p><strong>Застереження:</strong> Цей розділ демонструє можливості JavaScript та документує деякі граничні випадки використання методу <code>bind()</code>. Методи, наведені нижче, є не найкращим способом написання коду, їх не бажано використовувати у будь-якому виробничому середовищі.</p> -</div> - -<p>Зв'язані функції автоматично підходять для використання з оператором {{jsxref("Operators/new", "new")}} для побудови нових екземплярів, створених цільовою функцією. Коли зв'язана функція використовується для створення значення, надане значення <code>this</code> ігнорується. Однак, надані аргументи все одно передаються у виклик конструктора:</p> - -<pre class="brush: js">function Point(x, y) { - this.x = x; - this.y = y; -} - -Point.prototype.toString = function() { - return this.x + ',' + this.y; -}; - -var p = new Point(1, 2); -p.toString(); // '1,2' - -// не підтримується у поліфілі, що наведений нижче - -// працює добре з рідним методом bind: - -var YAxisPoint = Point.bind(null, 0/*x*/); - - -var emptyObj = {}; -var YAxisPoint = Point.bind(emptyObj, 0/*x*/); - -var axisPoint = new YAxisPoint(5); -axisPoint.toString(); // '0,5' - -axisPoint instanceof Point; // true -axisPoint instanceof YAxisPoint; // true -new Point(17, 42) instanceof YAxisPoint; // true -</pre> - -<p>Зауважте, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію для використання з оператором {{jsxref("Operators/new", "new")}}. Наслідком є те, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію, яка буде просто викликатися, навіть якщо ви хотіли б зв'язати функцію лише для викликів з оператором {{jsxref("Operators/new", "new")}}.</p> - -<pre class="brush: js">// Приклад може бути запущений прямо у консолі JavaScript -// ...продовження прикладу нагорі - -// Може викликатись як звичайна функція -// (хоча зазвичай це є небажаним) -YAxisPoint(13); - -emptyObj.x + ',' + emptyObj.y; -// > '0,13' -</pre> - -<p>Якщо ви бажаєте підтримувати використання зв'язаної функції лише з оператором {{jsxref("Operators/new", "new")}}, або лише викликаючи її, то цільова функція має примусово ввести це обмеження.</p> - -<h3 id="Створення_ярликів">Створення ярликів</h3> - -<p>Метод <code>bind()</code> також є корисним у випадках, коли ви хочете створити ярлик до функції, котра потребує конкретного значення <code>this</code>.</p> - -<p>Візьміть, для прикладу, метод {{jsxref("Array.prototype.slice")}}, який ви хочете використати для перетворення подібного до масиву об'єкта на справжній масив. Ви можете створити такий ярлик:</p> - -<pre class="brush: js">var slice = Array.prototype.slice; - -// ... - -slice.apply(arguments); -</pre> - -<p>З <code>bind()</code> це можна спростити. В наступній частині коду, <code>slice</code> є зв'язаною функцією з функцією {{jsxref("Function.prototype.apply()", "apply()")}} об'єкта {{jsxref("Function.prototype")}}, зі значенням <code>this</code>, яке дорівнює функції {{jsxref("Array.prototype.slice()", "slice()")}} об'єкта {{jsxref("Array.prototype")}}. Це означає що додаткові виклики методу <code>apply()</code> можуть бути усунені:</p> - -<pre class="brush: js">// те саме, що й "slice" у попередньому прикладі -var unboundSlice = Array.prototype.slice; -var slice = Function.prototype.apply.bind(unboundSlice); - -// ... - -slice(arguments); -</pre> - -<h2 id="Поліфіл">Поліфіл</h2> - -<p>Оскільки старші переглядачі, загалом, є також повільнішими, набагато критичніше, ніж багатьом здається, створювати продуктивні поліфіли, щоб користування переглядачем не було таким жахливим. Отже, нижче наведені два варіанти поліфілів Function.prototype.bind. Перший набагато менший та спритніший, але не працює при використанні оператора `new`. Другий менш продуктивний та більший за розміром, але дозволяє певне використання оператора `new` на зв'язаних функціях. Загалом, у коді рідко можна зустріти `new`, що використовується на зв'язаній функції, тому, в цілому, краще обирати перший варіант.</p> - -<pre class="brush: js">// Не працює з `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') { - // найближчий можливий варіант до внутрішньої - // функції IsCallable у ECMAScript 5 - 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>Ви можете це частково обійти, вставивши наступний код на початку ваших скриптів, що дозволить використовувати більшу частину функціональності <code>bind()</code> у реалізаціях, які початково її не підтримують.</p> - -<pre class="brush: js">// Так, це працює з `new funcA.bind(thisArg, args)` -if (!Function.prototype.bind) (function(){ - var ArrayPrototypeSlice = Array.prototype.slice; - Function.prototype.bind = function(otherThis) { - if (typeof this !== 'function') { - // найближчий можливий варіант до внутрішньої - // функції IsCallable у ECMAScript 5 - 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; // скинути до початкових базових аргументів - baseArgs.push.apply(baseArgs, arguments); - return fToBind.apply( - fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs - ); - }; - - if (this.prototype) { - // Function.prototype не має властивості prototype - fNOP.prototype = this.prototype; - } - fBound.prototype = new fNOP(); - - return fBound; - }; -})();</pre> - -<p>Деякі з багатьох відмінностей (також можуть бути й інші, оскільки цей список не претендує на вичерпність) між цим алгоритмом та основним алгоритмом:</p> - -<ul> - <li>Часткова реалізація покладається на те, що вбудовані методи {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} та {{jsxref("Function.prototype.apply()")}} мають свої початкові значення.</li> - <li>Часткова реалізація створює функції, які не мають незмінної "отруйної таблетки" {{jsxref("Function.caller", "caller")}} та властивостей <code>arguments</code>, що викидають помилку {{jsxref("Global_Objects/TypeError", "TypeError")}} на get, set чи видалення. (Це можна додати, якщо реалізація підтримує {{jsxref("Object.defineProperty")}}, або частково реалізувати [без викидання винятків на видалення], якщо реалізація підтримує розширення {{jsxref("Object.__defineGetter__", "__defineGetter__")}} та {{jsxref("Object.__defineSetter__", "__defineSetter__")}}.)</li> - <li>Часткова реалізація створює функції, які мають властивість <code>prototype</code>. (Правильні зв'язані функції її не мають.)</li> - <li>Часткова реалізація створює зв'язані функції, чия властивість {{jsxref("Function.length", "length")}} не узгоджується з встановленою у ECMA-262: вона створює функції зі значенням length 0, в той час, як повна реалізація, в залежності від значення length цільової функції та числа попередньо заданих аргументів, може повернути ненульове значення.</li> -</ul> - -<p>Якщо ви вирішили використовувати цю часткову реалізацію, <strong>ви не повинні покладатися на неї у ситуаціях, де її поведінка відрізняється від 5-ї версії ECMA-262!</strong> На щастя, ці відхилення від специфікації не часто (якщо взагалі) зустрічаються у більшості випадків кодування. Якщо ви не розумієте жодних відхилень від специфікації, наведених вище, тоді, у цьому конкретному випадку, буде безпечно не хвилюватись щодо подробиць цих невідповідностей.</p> - -<p><strong>Якщо це абсолютно необхідно, а продуктивність неважлива</strong>, значно повільніше рішення (але у більшій відповідності до специфікації) можна знайти тут <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a>.</p> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Специфікація</th> - <th scope="col">Статус</th> - <th scope="col">Коментар</th> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Початкове визначення. Реалізовано у 1.8.5.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> - -<div class="hidden"> -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("javascript.builtins.Function.bind")}}</p> - -<div id="compat-mobile"></div> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{jsxref("Function.prototype.apply()")}}</li> - <li>{{jsxref("Function.prototype.call()")}}</li> - <li>{{jsxref("Functions", "Функції", "", 1)}}</li> -</ul> |