Revision 967491 of Function.prototype.call()

<div>{{JSRef}}</div>

<p>The <code><strong>call()</strong></code> method calls a function with a given <code>this</code> value and arguments provided individually.</p>

<div class="note">
<p><strong>Note:</strong> While the syntax of this function is almost identical to that of {{jsxref("Function.prototype.apply", "apply()")}}, the fundamental difference is that <code>call()</code> accepts an <strong>argument list</strong>, while <code>apply()</code> accepts a <strong>single array of arguments</strong>.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
<code><var>fun</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>

<h3 id="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 <code>this</code> may not be the actual value seen by the method: if the method is a function in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} code, {{jsxref("Global_Objects/null", "null")}} and {{jsxref("Global_Objects/undefined", "undefined")}} will be replaced with the global object&nbsp;and primitive values will be converted to objects.</dd>
 <dt><code>arg1, arg2, ...</code></dt>
 <dd>Arguments for the object.</dd>
</dl>

<h2 id="Description">Description</h2>

<p>A different <code>this</code> object can be assigned&nbsp;when calling an existing function. <code>this</code> refers to the current object, the calling object. With <code>call</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>

<h2 id="Examples">Examples</h2>

<h3 id="Using_call_to_chain_constructors_for_an_object">Using <code>call</code> to chain constructors for an object</h3>

<p>You can use <code>call</code> to chain constructors for an object, similar to Java. In the following example, the constructor for the <code>Product</code> object is defined with two parameters, <code>name</code> and <code>price</code>. Two other functions <code>Food</code> and <code>Toy</code> invoke <code>Product</code> passing <code>this</code> and <code>name</code> and <code>price</code>. Product initializes the properties <code>name</code> and <code>price</code>, both specialized functions define the <code>category</code>.</p>

<pre class="brush: js">
function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price &lt; 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
</pre>

<h3 id="Using_call_to_invoke_an_anonymous_function">Using <code>call</code> to invoke an anonymous function</h3>

<p>In this purely constructed example, we create an anonymous function and use <code>call</code> to invoke it on every object in an array. The main purpose of the anonymous function here is to add a print function to every object, which is able to print the right index of the object in the array. Passing the object as <code>this</code> value was not strictly necessary, but is done for explanatory purpose.</p>

<pre class="brush: js">
var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i &lt; animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}
</pre>

<h3 id="Using_call_to_invoke_a_function_and_specifying_the_context_for_'this'">Using <code>call</code> to invoke a function and specifying the context for 'this'</h3>

<p>In below example, when we will call greet the value of this will be bind to object i.<br />
 &nbsp;</p>

<pre class="brush: js">
function greet() {
  var reply = [this.person, 'Is An Awesome', this.role].join(' ');
  console.log(reply);
}

var i = {
  person: 'Douglas Crockford', role: 'Javascript Developer'
};

greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
</pre>

<p>&nbsp;</p>

<p>&nbsp;</p>

<h2 id="Specifications">Specifications</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.3.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</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>
 </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>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
 <li>{{jsxref("Function.prototype.apply()")}}</li>
 <li>
  <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></p>
 </li>
</ul>