path: root/files/pl/web/javascript/referencje/obiekty/function/apply/index.html

---
title: Function.prototype.apply()
slug: Web/JavaScript/Referencje/Obiekty/Function/apply
translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
---
<div>{{JSRef}}</div>

<p>Metoda <code>apply()</code> wywołuje daną funkcję podstawiając daną wartość <code>this</code> i argumenty <span id="result_box" lang="pl"><span>przedstawione</span> <span>w postaci tablicy</span></span> (lub obiektu tablicopodobnego (<a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>)).</p>

<div class="note">
<p><strong>Notka:</strong> <span id="result_box" lang="pl"><span>Składnia</span> <span>tej funkcji jest</span> <span>niemal identyczna </span><span>do</span></span> {{jsxref("Function.call", "call()")}}, podstawową różnicą jest to, iż <code>call()</code> przyjmuje <strong>listę argumentów</strong>, podczas gdy <code>apply()</code> akceptuje <strong>pojedynczą tablicę argumentów</strong>.</p>
</div>

<h2 id="Składnia">Składnia</h2>

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

<h3 id="Parametry">Parametry</h3>

<dl>
 <dt><code>thisArg</code></dt>
 <dd>Optional. The value of <code>this</code> provided for the call to <em><code>func</code></em>. Note that <code>this</code> may not be the actual value seen by the method: if the method is a function in {{jsxref("Strict_mode", "non-strict mode", "", 1)}} code, {{jsxref("null")}} and {{jsxref("undefined")}} will be replaced with the global object, and primitive values will be boxed.</dd>
 <dt><code>argsArray</code></dt>
 <dd>Optional. An array-like object, specifying the arguments with which <em><code>fun</code></em> should be called, or {{jsxref("null")}} or {{jsxref("undefined")}} if no arguments should be provided to the function. Starting with ECMAScript 5 these arguments can be a generic array-like object instead of an array. See below for {{anch("Browser_compatibility", "browser compatibility")}} information.</dd>
</dl>

<h3 id="Zwracana_wartość">Zwracana wartość</h3>

<p>Wynik wywoływanej funkcji z określoną wartością <code>this</code> i argumentami.</p>

<h2 id="Opis">Opis</h2>

<p><span id="result_box" lang="pl"><span>Można</span> <span>przypisać inny</span> <span>obiekt</span> <code>this</code> <span>podczas wywoływania</span> <span>istniejącej</span> <span>funkcji.</span></span> <code>this</code> <span id="result_box" lang="pl"><span>odnosi się do</span> <span>bieżącego obiektu</span><span>,</span> <span>obiektu</span> <span>wywołującego. </span></span><span lang="pl"><span>Z</span> <span>apply</span><span> można</span> <span>napisać metodę</span> <span>raz, a następnie</span> <span>dziedziczyć</span> <span>ją</span> <span>w innym</span> <span>obiekcie,</span> <span>bez konieczności</span> <span>przepisywania</span> <span>metody</span> <span>dla nowego</span> <span>obiektu.</span></span></p>

<p><code>apply</code> jest bardzo podobne do {{jsxref("Function.call", "call()")}}, <span class="short_text" id="result_box" lang="pl"><span>z wyjątkiem typu danych</span> <span>argumentów</span><span>, które wspiera</span><span>. </span></span><span id="result_box" lang="pl"><span>Można</span> <span>używać tablicy</span> <span>argumentów</span> <span>zamiast</span> <span>zestawu argumentów (parametrów</span><span>).</span></span> Z metodą <code>apply</code>, możesz używać tablic w sensie dosłownym, na przykład <code><em>fun</em>c.apply(this, ['eat', 'bananas'])</code>, lub obiektów typu {{jsxref("Array")}}, na przykład, <code><em>func</em>.apply(this, new Array('eat', 'bananas'))</code>.</p>

<p>Można używać również {{jsxref("Funkcje/arguments", "arguments")}} dla parametru <code>argsArray</code>. <code>arguments</code> jest zmienną lokalną dostępną wewnątrz każdej funkcji. Można to zastosować<span id="result_box" lang="pl"><span> do wszystkich</span> <span>nieokreślonych</span> <span>argumentów</span> wywoływanego <span>obiektu</span><span>.</span></span> <span id="result_box" lang="pl"><span>Tak więc</span> <span>nie trzeba</span> <span>znać</span> <span>argumentów</span> <span>wywoływanego obiektu</span> <span>przy</span> <span>użyciu</span> <span>metody</span> <span><code>apply</code>. </span></span> Możesz użyć <code>arguments</code>, aby <span class="short_text" id="result_box" lang="pl"><span>przekazać</span> <span>wszystkie argumenty do wywoływanego obiektu. </span></span><span id="result_box" lang="pl"><span>Wywołany</span> <span>obiekt</span> <span>jest</span> <span>odpowiedzialny za obsługę</span> <span>otrzymanych argumentów</span><span>.</span></span></p>

<p><span lang="pl"><span>Od </span></span>ECMAScript 5th Edition możliwe jest również używanie wszelkiego rodzaju obiektów „tablicopodobnych” (array-like), co w praktyce oznacza, że obiekt taki musi mieć własność <code>length</code> i całkowite własności (indeksy) w zakresie <code>(0..length-1)</code>. Przykładowo możesz użyć {{domxref("NodeList")}} lub własnego oiektu jak np. <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p>

<div class="note">
<p>Większość przeglądarek, w tym Chrome 14 i Internet Explorer 9, w dalszym ciągu nie akceptuje obiektów tablicopodobnych i będzie wyrzucać wyjątek.</p>
</div>

<h2 id="Przykłady">Przykłady</h2>

<h3 id="Użycie_apply_do_dodania_tablicy_do_innej_tablicy">Użycie <code>apply</code> do dodania tablicy do innej tablicy</h3>

<p>Możemy użyć metody <code>push</code> do dodania elementu do tablicy. I, jako że <code>push</code> przyjmuje zmienną liczbę argumentów, możemy również dodać wiele elementów naraz – ale jeśli faktycznie przekażemy tablicę do funkcji <code>push</code>, wówczas rzeczywiście doda ona tablicę jako pojedynczy element, zamiast dodać jej elementy, więc skończymy z tablicą wewnątrz tablicy. Co jeśli to nie jest to, co chcieliśmy osiągnąć? <code>concat</code> ma zachowanie takie, jakiego oczekiwalibyśmy w tym przypadku, jednak funkcja ta nie dodaje w rzeczywistości tablicy do istniejącej tablicy, ale tworzy i zwraca nową. Ale chcieliśmy zmodyfikować naszą istniejącą tablicę… Więc co teraz? Napisać pętlę? No chyba nie?</p>

<p><code>apply</code> przychodzi na ratunek!</p>

<pre class="brush: js">var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
</pre>

<p> </p>

<h3 id="Using_apply_and_built-in_functions">Using <code>apply</code> and built-in functions</h3>

<p> </p>

<p>Clever usage of <code>apply</code> allows you to use built-ins functions for some tasks, that otherwise probably would have been written by looping over the array values. As an example here we are going to use <code>Math.max</code>/<code>Math.min</code>, to find out the maximum/minimum value in an array.</p>

<pre class="brush: js">// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers);
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers);

// vs. simple loop based algorithm
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>But beware: in using <code>apply</code> this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limit of 65536</a>), because the limit (indeed even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. To illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments <code>5, 6, 2, 3</code> had been passed to <code>apply</code> in the examples above, rather than the full array.</p>

<p>If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:</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>

<p> </p>

<h3 id="Using_apply_to_chain_constructors">Using <code>apply</code> to chain constructors</h3>

<p> </p>

<p>You can use <code>apply</code> to chain {{jsxref("Operators/new", "constructors", "", 1)}} for an object, similar to Java. In the following example we will create a global {{jsxref("Function")}} method called <code>construct</code>, which will enable you to use an array-like object with a constructor instead of an arguments list.</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" style="height: 250px; overflow: auto;">
<p><strong>Note:</strong> The <code>Object.create()</code> method used above is relatively new. For alternative methods, please consider one of the following approaches:</p>

<p>Using {{jsxref("Object/__proto__", "Object.__proto__")}}:</p>

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

<p>Using <a href="/en-US/docs/Web/JavaScript/Closures">closures</a>:</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>

<p>Using the {{jsxref("Function")}} constructor:</p>

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

<p>Example usage:</p>

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

var myArray = [4, 'Hello world!', false];
var myInstance = MyConstructor.construct(myArray);

console.log(myInstance.property1);                // logs 'Hello world!'
console.log(myInstance instanceof MyConstructor); // logs 'true'
console.log(myInstance.constructor);              // logs 'MyConstructor'
</pre>

<div class="note">
<p><strong>Note:</strong> This non-native <code>Function.construct</code> method will not work with some native constructors; like {{jsxref("Date")}}, for example. In these cases you have to use the {{jsxref("Function.prototype.bind")}} method. For example, imagine having an array like the following, to be used with {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in this case you have to write something like: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. This is not the best way to do things, and probably not to be used in any production environment.</p>
</div>

<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('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Initial definition. Implemented in 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>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Zgodność_z_przeglądarkami">Zgodność 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>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td>
   <td>{{CompatVersionUnknown}}</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>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>
  <tr>
   <td>ES 5.1 generic array-like object as {{jsxref("Functions/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="Zobacz_również">Zobacz również</h2>

<ul>
 <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
 <li>{{jsxref("Function.prototype.call()")}}</li>
 <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
 <li>{{jsxref("Reflect.apply()")}}</li>
</ul>