Function.prototype.call()

  • Revision slug: Web/JavaScript/Reference/Global_Objects/Function/call
  • Revision title: Function.prototype.call
  • Revision id: 417167
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Sanitize some HTML tagsMoved From JavaScript/Reference/Global_Objects/Function/call to Web/JavaScript/Reference/Global_Objects/Function/call

Revision Content

Summary

Calls a function with a given this value and arguments provided individually.

NOTE: While the syntax of this function is almost identical to that of apply(), 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 ECMAScript 3rd Edition

Syntax

fun.call(thisArg[, arg1[, arg2[, ...]]])

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.
arg1, arg2, ...
Arguments for the object.

Description

You can assign a different this object when calling an existing function. this refers to the current object, the calling object.

With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

Examples

Using call to chain constructors for an object

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

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0)
    throw RangeError('Cannot create product "' + name + '" with a negative price');
  return this;
}

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

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

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

Using call to invoke an anonymous function

In this purely constructed example, we create anonymous function and use call 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 this value was not strictly necessary, but is done for explanatory purpose.

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

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

See also

Revision Source

<h2 id="Summary">Summary</h2>
<p>Calls a function with a given <code>this</code> value and arguments provided individually.</p>
<div class="note">
  <strong>NOTE:</strong> While the syntax of this function is almost identical to that of <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code>, 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">Method of <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="https://developer.mozilla.org/en/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>ECMAScript 3rd Edition</td>
    </tr>
  </tbody>
</table>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
<code><em>fun</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</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 this may not be the actual value seen by the method: if the method is a function in <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">non-strict mode</a> code, <code>null</code> and <code>undefined</code> will be replaced with the global object, and primitive values will be boxed.</dd>
  <dt>
    <code>arg1, arg2, ...</code></dt>
  <dd>
    Arguments for the object.</dd>
</dl>
<h2 id="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.</p>
<p>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 "' + name + '" with a negative price');
  return this;
}

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

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

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 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>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="JavaScript/Reference/Global_Objects/Function/apply">apply</a></li>
</ul>
Revert to this revision