mozilla

Revision 35142 of Function.prototype.call()

  • Revision slug: JavaScript/Reference/Global_Objects/Function/call
  • Revision title: call
  • Revision id: 35142
  • Created:
  • Creator: anthonyryan1
  • Is current revision? No
  • Comment 39 words added

Revision Content

Summary

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

It is worth noting, that while the syntax and effect is almost identical to that of apply, the fundamental difference is that call will pass the arguments by value, while apply will pass by reference.

Method of Function
Implemented in: JavaScript 1.3
ECMAScript: ECMA-262 3rd Edition

Syntax

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

Parameters

thisArg 
Determines the value of this inside fun. If thisArg is null or undefined, this will be the global object. Otherwise, this will be equal to Object(thisArg) (which is thisArg if thisArg is already an object, or a String, Boolean, or Number if thisArg is a primitive value of the corresponding type). Therefore, it is always true that typeof this == "object" when the function executes.
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 value. Another object, prod_dept, initializes its unique variable (dept) and calls the constructor for product in its constructor to initialize the other variables.

function Product(name, value){
   this.name = name;
   if(value >= 1000)
      this.value = 999;
   else
      this.value = value;
}

function Prod_dept(name, value, dept){
   this.dept = dept;
   Product.call(this, name, value);
}

Prod_dept.prototype = new Product();

// since 5 is less than 1000, value is set
cheese = new Prod_dept("feta", 5, "food");

// since 5000 is above 1000, value will be 999
car = new Prod_dept("honda", 5000, "auto");

Using call to invoke an anonymous function

You can use call() to invoke anonymous functions. In the following example, there is an anonymous function as part of the condition of an if statement. In this case, the function loops through an array of email addresses verifying that each one is valid. This may be particularly useful when the condition requires more comparison than just whether the email addresses are valid.

var x = 0, emailAddress = "timon@lionking.com, abu@aladdin.com, dory@findingnemo.com";

if(
   !x < 1 || // Example of additional comparison
   function(){
      for( var i in this ){
         if( !/^([a-zA-Z0-9])+([a-zA-Z0-9\.\\+=_-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+\.[a-zA-Z.]{2,5}$/.test( this[i] ) ){
            return true;
         }
      }
   }.call( emailAddress.split(/\s*,\s*/) )
) {
   alert("var(x) is not less than 1 or an email addresses is invalid")
}

 

See Also

apply

{{ languages( { "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Function/call" } ) }}

Revision Source

<h2>Summary</h2>
<p>Calls a function with a given <code>this</code> value and arguments provided individually.</p>
<p>It is worth noting, that while the syntax and effect is almost identical to that of <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a>, the fundamental difference is that call will pass the arguments by value, while apply will pass by reference.</p>
<table class="standard-table"> <thead> <tr> <th class="header" colspan="2" scope="row">Method of <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a></th> </tr> </thead> <tbody> <tr> <th scope="row">Implemented in:</th> <td>JavaScript 1.3</td> </tr> <tr> <th scope="row">ECMAScript:</th> <td>ECMA-262 3rd Edition</td> </tr> </tbody>
</table>
<h2>Syntax</h2>
<p><code><em>fun</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</code></p>
<h2>Parameters</h2>
<dl> <dt><code>thisArg</code> </dt> <dd>Determines the value of <code>this</code> inside <em><code>fun</code></em>. If <code>thisArg</code> is <code>null</code> or <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a>, <code>this</code> will be the global object. Otherwise, <code>this</code> will be equal to <code>Object(thisArg)</code> (which is <code>thisArg</code> if <code>thisArg</code> is already an object, or a <code>String</code>, <code>Boolean</code>, or <code>Number</code> if <code>thisArg</code> is a primitive value of the corresponding type). Therefore, it is always true that <code>typeof this == "object"</code> when the function executes.</dd>
</dl>
<dl> <dt><code>arg1, arg2, ...</code> </dt> <dd>Arguments for the object.</dd>
</dl>
<h2>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>Examples</h2>
<h3>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 product object is defined with two parameters, <code>name</code> and <code>value</code>. Another object, <code>prod_dept</code>, initializes its unique variable (<code>dept</code>) and calls the constructor for <code>product</code> in its constructor to initialize the other variables.</p>
<pre class="brush: js">function Product(name, value){
   this.name = name;
   if(value &gt;= 1000)
      this.value = 999;
   else
      this.value = value;
}

function Prod_dept(name, value, dept){
   this.dept = dept;
   Product.call(this, name, value);
}

Prod_dept.prototype = new Product();

// since 5 is less than 1000, value is set
cheese = new Prod_dept("feta", 5, "food");

// since 5000 is above 1000, value will be 999
car = new Prod_dept("honda", 5000, "auto");
</pre>
<h3>Using <code>call</code> to invoke an anonymous function</h3>
<p>You can use <code>call()</code> to invoke anonymous functions. In the following example, there is an anonymous function as part of the condition of an <code>if</code> statement. In this case, the function loops through an array of email addresses verifying that each one is valid. This may be particularly useful when the condition requires more comparison than just whether the email addresses are valid.</p>
<pre class="brush: js">var x = 0, emailAddress = "timon@lionking.com, abu@aladdin.com, dory@findingnemo.com";

if(
   !x &lt; 1 || // Example of additional comparison
   function(){
      for( var i in this ){
         if( !/^([a-zA-Z0-9])+([a-zA-Z0-9\.\\+=_-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+\.[a-zA-Z.]{2,5}$/.test( this[i] ) ){
            return true;
         }
      }
   }.call( emailAddress.split(/\s*,\s*/) )
) {
   alert("var(x) is not less than 1 or an email addresses is invalid")
}
</pre>
<p> </p>
<h2>See Also</h2>
<p><a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply</a></p>
<p>{{ languages( { "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Function/call" } ) }}</p>
Revert to this revision