mozilla

Revision 334809 of Function.prototype.apply()

  • Revision slug: JavaScript/Reference/Global_Objects/Function/apply
  • Revision title: Function.prototype.apply method
  • Revision id: 334809
  • Created:
  • Creator: tehsis
  • Is current revision? No
  • Comment I think is useful to have the link to the corresponding article for what is an "Array like object"

Revision Content

Summary

Calls a function with a given this value and arguments provided as an array (or an array like object).

NOTE: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.
Method of Function
Implemented in JavaScript 1.3
ECMAScript Edition ECMA-262 3rd Edition

Syntax

fun.apply(thisArg[, argsArray])

Parameters

thisArg
The value of this provided for the call to fun. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.
argsArray
An array like object, specifying the arguments with which fun should be called, or null or undefined if no arguments should be provided to the function.
{{ js_minversion_note("1.8.5", "Starting in JavaScript 1.8.5 (Firefox 4), this method works according to the ECMAScript 5 specification. That is, the arguments can be a generic array-like object instead of an array.") }}

See {{ bug(562448) }} for details on the change described above.

Description

You can assign a different this object when calling an existing function. this refers to the current object, the calling object. With apply, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

apply is very similar to call, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With apply, you can use an array literal, for example, fun.apply(this, ['eat', 'bananas']), or an Array object, for example, fun.apply(this, new Array('eat', 'bananas')).

You can also use arguments for the argsArray parameter. arguments is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the apply method. You can use arguments to pass all the arguments to the called object. The called object is then responsible for handling the arguments.

Since ECMAScript 5th Edition you can also use any kind of object which is array like, so in practice this means it's going to have a property length and integer properties in the range [0...length). As an example you can now use a NodeList or a own custom object like {'length': 2, '0': 'eat', '1': 'bananas'}.

{{ note("Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array like objects and will throw an exception.") }}

Examples

Using apply to chain constructors

You can use apply to chain constructors for an object, similar to Java. In the following example we will create a global Function method called construct, which will make you able to use an array-like object with a constructor instead of an arguments list.

Function.prototype.construct = function (aArgs) {
    var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); };
    fNewConstr.prototype = fConstructor.prototype;
    return new fNewConstr();
};

Example usage:

function MyConstructor () {
    for (var nProp = 0; nProp < arguments.length; nProp++) {
        this["property" + nProp] = arguments[nProp];
    }
}

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

alert(myInstance.property1); // alerts "Hello world!"
alert(myInstance instanceof MyConstructor); // alerts "true"
alert(myInstance.constructor); // alerts "MyConstructor"
Note: This non-native Function.construct method will not work with some native constructors (like Date, for example). In these cases you have to use the Function.bind method (for example, imagine to have an array like the following, to be used with Date constructor: [2012, 11, 4]; in this case you have to write something like: new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() – anyhow this is not the best way to do things and probably should not be used in any production environment).

apply and built-in functions

Clever usage of apply 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 Math.max/Math.min to find out the maximum/minimum value in an array.

/* 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 < numbers.length; i++) {
  if (numbers[i] > max)
    max = numbers[i];
  if (numbers[i] < min) 
    min = numbers[i];
}

But beware: in using apply 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 argument limit of 65536), 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 5, 6, 2, 3 had been passed to apply in the examples above, rather than the full array.) 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:

function minOfArray(arr) {
  var min = Infinity;
  var QUANTUM = 32768;

  for (var i = 0, len = arr.length; i < 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]);

See also

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>Calls a function with a given <code>this</code> value and <code>arguments</code> provided as an array (or an <a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>).</p>
<div class="note">
  <strong>NOTE:</strong> While the syntax of this function is almost identical to that of <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>call()</code></a>, the fundamental difference is that <code>call()</code> accepts an argument list, while <code>apply()</code> accepts a single array of arguments.</div>
<table class="standard-table">
  <thead>
    <tr>
      <th class="header" colspan="2" scope="row">Method of <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function">Function</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Implemented in</td>
      <td>JavaScript 1.3</td>
    </tr>
    <tr>
      <td>ECMAScript Edition</td>
      <td>ECMA-262 3rd Edition</td>
    </tr>
  </tbody>
</table>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<code><em>fun</em>.apply(<em>thisArg</em>[, <em>argsArray</em>])</code></pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
  <dt>
    <code>thisArg</code></dt>
  <dd>
    The value of <code>this</code> provided for the call to <em><code>fun</code></em>. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, <code>null</code> and <code>undefined</code> will be replaced with the global object, and primitive values will be boxed.</dd>
  <dt>
    <code>argsArray</code></dt>
  <dd>
    An array like object, specifying the arguments with which <em><code>fun</code></em> should be called, or <code>null</code> or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global_Properties/undefined">undefined</a> if no arguments should be provided to the function.</dd>
</dl>
<div>
  {{ js_minversion_note("1.8.5", "Starting in JavaScript 1.8.5 (Firefox 4), this method works according to the ECMAScript 5 specification. That is, the arguments can be a generic array-like object instead of an array.") }}</div>
<p>See {{ bug(562448) }} for details on the change described above.</p>
<h2 id="Description" name="Description">Description</h2>
<p>You can assign a different <code>this</code> object when calling an existing function. <code>this</code> refers to the current object, the calling object. With <code>apply</code>, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.</p>
<p><code>apply</code> is very similar to <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="JavaScript/Reference/Global_Objects/Function/call">call</a></code>, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With <code>apply</code>, you can use an array literal, for example, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, or an <code>Array</code> object, for example, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p>
<p>You can also use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code> for the <code>argsArray</code> parameter. <code>arguments</code> is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the <code>apply</code> method. You can use <code>arguments</code> to pass all the arguments to the called object. The called object is then responsible for handling the arguments.</p>
<p>Since ECMAScript 5th Edition you can also use any kind of object which is array like, so in practice this means it's going to have a property <code>length</code> and integer properties in the range <code>[0...length)</code>. As an example you can now use a <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList">NodeList</a> or a own custom object like <code>{'length': 2, '0': 'eat', '1': 'bananas'}</code>.</p>
<div>
  {{ note("Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array like objects and will throw an exception.") }}</div>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">Using <code>apply</code> to chain constructors</h3>
<p>You can use <code>apply</code> to chain <a href="/en-US/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/new">constructors</a> for an object, similar to Java. In the following example we will create a global <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> method called <code>construct</code>, which will make you able 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 fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); };
    fNewConstr.prototype = fConstructor.prototype;
    return new fNewConstr();
};</pre>
<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);

alert(myInstance.property1); // alerts "Hello world!"
alert(myInstance instanceof MyConstructor); // alerts "true"
alert(myInstance.constructor); // alerts "MyConstructor"</pre>
<div class="note">
  <strong>Note:</strong> This non-native <code>Function.construct</code> method will not work with some native constructors (like <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>, for example). In these cases you have to use the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind#Bound_functions_used_as_constructors" title="JavaScript/Reference/Global_Objects/Function/bind#Bound_functions_used_as_constructors"><code>Function.bind</code></a> method (for example, imagine to have an array like the following, to be used with <code>Date</code> 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> – anyhow this is not the best way to do things and probably should not be used in any production environment).</div>
<h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions"><code>apply</code> and built-in functions</h3>
<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 Math.max/Math.min 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.) 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>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="JavaScript/Reference/Global_Objects/Function/call">call</a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global_Objects/Function/bind">bind</a>, <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></li>
</ul>
Revert to this revision