path: root/files/ru/web/javascript/reference/global_objects/function/apply/index.html

---
title: Function.prototype.apply()
slug: Web/JavaScript/Reference/Global_Objects/Function/apply
tags:
  - Function
  - JavaScript
  - Method
  - Reference
  - Référence(2)
translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
---
<div>{{JSRef("Global_Objects", "Function")}}</div>

<h2 id="Summary" name="Summary">Общие сведения</h2>

<p>Метод <strong><code>apply()</code></strong> вызывает функцию с указанным значением <code>this</code> и аргументами, предоставленными в виде массива (либо <a href="/ru/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">массивоподобного объекта</a>).</p>

<div class="note">
<p><strong>Примечание:</strong> хотя синтаксис этой функции практически полностью идентичен функции {{jsxref("Function.prototype.call()", "call()")}}, фундаментальное различие между ними заключается в том, что функция <code>call()</code> принимает список аргументов, в то время как функция <code>apply()</code> принимает единичный массив аргументов.</p>
</div>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox"><code><var>fun</var>.apply(<var>thisArg</var>, [<var>argsArray</var>])</code></pre>

<h3 id="Parameters" name="Parameters">Параметры</h3>

<dl>
 <dt><code>thisArg</code></dt>
 <dd>Опциональный параметр. Значение <code>this</code>, предоставляемое для вызова функции <em><code>fun</code></em>. Обратите внимание, что <code>this</code> может не быть реальным значением, видимым этим методом: если метод является функцией в {{jsxref("Functions_and_function_scope/Strict_mode", "нестрогом режиме", "", 1)}}, значения {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}} будут заменены глобальным объектом, а примитивные значения будут упакованы в объекты.</dd>
 <dt><code>argsArray</code></dt>
 <dd>Опциональный параметр. Массивоподобный объект, определяющий аргументы, с которыми функция <em><code>fun</code></em> должна быть вызвана, либо {{jsxref("Global_Objects/null", "null")}} или {{jsxref("Global_Objects/undefined", "undefined")}}, если в функцию не надо передавать аргументы. Начиная с ECMAScript 5 эти аргументы могут быть обобщёнными массивоподобными объектами, а не только массивом. Смотрите ниже информацию по {{anch("Browser_compatibility", "совместимости с браузерами")}}.</dd>
</dl>

<h2 id="Description" name="Description">Описание</h2>

<p>Вы можете присваивать различные объекты <code>this</code> при вызове существующей функции. <code>this</code> ссылается на текущий объект, вызывающий объект. С помощью <code>apply()</code> вы можете написать метод один раз, а затем наследовать его в других объектах без необходимости переписывать метод для каждого нового объекта.</p>

<p>Метод <code>apply</code> очень похож на метод {{jsxref("Function.prototype.call()", "call()")}}, за исключением поддерживаемого типа аргументов. Вы можете использовать массив аргументов вместо набора именованных параметров. Вместе с <code>apply</code> вы можете использовать литерал массива, например, <code><em>fun</em>.apply(this, ['есть', 'бананы'])</code>, либо объект {{jsxref("Global_Objects/Array", "Array")}}, например, <code><em>fun</em>.apply(this, new Array('есть', 'бананы'))</code>.</p>

<p>Также вы можете использовать в качестве параметра <code>argsArray</code> псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}}. <code>arguments</code> является локальной переменной функции. Он может использоваться для всех неопределённых аргументов вызываемого объекта. Таким образом, вы не обязаны знать, сколько и какие аргументы требует вызываемый объект при использовании метода <code>apply()</code>. Вы можете использовать псевдомассив <code>arguments</code> для передачи всех аргументов в вызываемый объект. Вызываемый объект самостоятельно разберётся с обработкой аргументов.</p>

<p>Начиная с 5-го издания ECMAScript, вы также можете использовать любой вид массивоподобного объекта, что на практике означает, что он должен иметь свойство <code>length</code> и целочисленные свойства в диапазоне <code>(0...length)</code>. В качестве примера, теперь вы можете использовать {{domxref("NodeList")}} или свой собственный объект вида <code>{ 'length': 2, '0': 'есть', '1': 'бананы' }</code>.</p>

<p>{{note("Большинство браузеров, включая Chrome 14 и Internet Explorer 9, всё ещё не принимают массивоподобные объекты и будут выбрасывать исключение.")}}</p>

<h2 id="Examples" name="Examples">Примеры</h2>

<h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">Пример: использование <code>apply()</code> для связи конструкторов объекта в цепочку</h3>

<p>Вы можете использовать метод <code>apply()</code> для объединения в цепочку {{jsxref("Operators/new", "конструкторов", "", 1)}} объекта, как в Java. В следующем примере мы создадим в объекте {{jsxref("Global_Objects/Function", "Function")}} глобальный метод <code>construct()</code>, который позволит нам использовать массивоподобные объекты с конструктором вместо списка аргументов.</p>

<pre class="brush: js">Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};
</pre>

<div class="note">
<p><strong>Примечание:</strong> метод {{jsxref("Object.create()")}}, использованный в этом примере, относительно новый. В качестве альтернативного способа можно рассмотреть возможность использования замыкания:</p>

<pre class="brush: js">Function.prototype.construct = function(aArgs) {
  var fConstructor = this, fNewConstr = function() { fConstructor.apply(this, aArgs); };
  fNewConstr.prototype = fConstructor.prototype;
  return new fNewConstr();
};
</pre>
</div>

<p>Пример использования:</p>

<pre class="brush: js">function MyConstructor() {
  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
    this['property' + nProp] = arguments[nProp];
  }
}

var myArray = [4, 'Привет, мир!', false];
var myInstance = MyConstructor.construct(myArray);

alert(myInstance.property1);                // выведет 'Привет, мир!'
alert(myInstance instanceof MyConstructor); // выведет 'true'
alert(myInstance.constructor);              // выведет 'MyConstructor'
</pre>

<div class="note">
<p><strong>Примечание:</strong> этот неродной метод <code>Function.construct()</code> не будет работать с некоторыми родными конструкторами (вроде конструктора {{jsxref("Global_Objects/Date", "Date")}}, к примеру). В этих случаях вы можете использовать метод {{jsxref("Function.prototype.bind()")}} (например, представьте, что вы имеете следующий массив, который можно использовать с конструктором {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; в этом случае вы напишите что-то вроде: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — так или иначе, это не самый изящный способ и, вероятно, его не стоит использовать в рабочем окружении).</p>
</div>

<h3 id="Example_Using_apply_and_built-in_functions" name="Example:_Using_apply_and_built-in_functions">Пример: использование <code>apply()</code> и встроенных функций</h3>

<p>Умное использование метода <code>apply()</code> позволяет вам использовать встроенные функции для некоторых задач, для которых в противном случае пришлось бы писать цикл по массиву значений. В качестве примера давайте используем {{jsxref("Math.max()")}}/{{jsxref("Math.min()")}} для нахождения максимального/минимального значения в массиве.</p>

<pre class="brush: js">/* мин/макс числа в массиве */
var numbers = [5, 6, 2, 3, 7];

/* используем apply к Math.min/Math.max */
var max = Math.max.apply(null, numbers); /* Это эквивалентно Math.max(numbers[0], ...)
                                            или Math.max(5, 6, ...) */
var min = Math.min.apply(null, numbers);

/* сравним с простым алгоритмом с циклом */
max = -Infinity, min = +Infinity;

for (var i = 0; i &lt; numbers.length; i++) {
  if (numbers[i] &gt; max) {
    max = numbers[i];
  }
  if (numbers[i] &lt; min) {
    min = numbers[i];
  }
}
</pre>

<p>Но будьте осторожны: при использовании метода <code>apply()</code> таким образом вы рискуете выйти за пределы ограничения на количество аргументов в движке JavaScript. Последствия применения функции с очень большим количеством аргументов (думается, больше десяти тысяч аргументов) различаются от движка к движку (JavaScriptCore имеет жёстко зашитое <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">ограничение на количество аргументов в 65536</a>), поскольку этот предел (на самом деле, это природа поведения любого чрезвычайно огромного стека) не определён. Некоторые движки будут выкидывать исключение. Хуже того, другие просто отбрасывают реально переданные функции аргументы сверх лимита. (Для иллюстрации последнего случая: если такой движок имеет ограничение в четыре элемента [реальное ограничение, конечно же, гораздо выше], это выглядело бы так, как если бы в примере выше в метод <code>apply()</code> были переданы аргументы <code>5, 6, 2, 3</code>, а не весь массив.) Если ваш масив значений может вырасти до десятков тысяч, используйте смешанный подход: применяйте вашу функцию к порциям массива:</p>

<pre class="brush: js">function minOfArray(arr) {
  var min = Infinity;
  var QUANTUM = 32768;

  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
    min = Math.min(submin, min);
  }

  return min;
}

var min = minOfArray([5, 6, 2, 3, 7]);
</pre>

<h3 id="Example_Using_apply_in_monkey-patching" name="Example:_Using_apply_in_monkey-patching">Пример: использование <code>apply()</code> в «monkey-патчинге»</h3>

<p>Метод <code>apply()</code> может быть лучшим вариантом для «monkey-патчинга» встроенных в Firefox функций, либо JS библиотек. Пусть у вас есть функция <code>someobject.foo()</code>, вы можете изменить её таким немного хакерским способом:</p>

<pre class="brush: js">var originalfoo = someobject.foo;
someobject.foo = function() {
  // Делаем что-то до вызова функции
  console.log(arguments);
  // Вызываем функцию так, как будто бы она была вызвана обычным образом:
  originalfoo.apply(this, arguments);
  // Делаем что-то после вызова функции.
}
</pre>

<p>Этот метод особенно удобен, когда вам нужно отладить события, либо интерфейс с чем-то, что не имеет API, вроде различных событий <code>.on([event]...</code>, например, тех что используются в <a href="/ru/docs/Tools/Page_Inspector#Developer_API">Инспекторе инструментов разработчика</a>).</p>

<h2 id="Specifications" name="Specifications">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
  <tr>
   <td>ECMAScript 3-е издание.</td>
   <td>Стандарт</td>
   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Возможность</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Обобщённые массивоподобные объекты ES 5.1, вроде {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</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>Возможность</th>
   <th>Android</th>
   <th>Chrome для Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Обобщённые массивоподобные объекты ES 5.1, вроде {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Смотрите также</h2>

<ul>
 <li>объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</li>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
 <li>{{jsxref("Function.prototype.call()")}}</li>
 <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
</ul>