Javascript Function Method

function apply()

functionName.apply() calls the function with this value, and set this inside the function body.

The apply() method accepts two arguments:

the value of this inside the function
an array of arguments. It may be an instance of Array, or the arguments object.


function sum(num1, num2){//from  w w w .ja v a2  s. c  om
   return num1 + num2;
}

function callSum1(num1, num2){
   return sum.apply(this, arguments);    //passing in arguments object
}

function callSum2(num1, num2){
   return sum.apply(this, [num1, num2]); //passing in array
}

console.log(callSum1(10,10));   //20
console.log(callSum2(10,10));   //20

callSum1() executes the sum() method, passing in this as the this value and also passing in the arguments object.

The callSum2() method also calls sum(), but it passes in an array of the arguments instead.

The code above generates the following result.

Augment this in function.apply()

apply() can augment the this value inside of the function.

<!--  www .j a  v  a  2 s  . c  om-->
<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
    window.myName = "XML";
    var o = { myName: "CSS" };
    
    function printMyName(){
       console.log(this.myName);
    }
    
    printMyName();            //XML
    
    printMyName.apply(this);   //XML
    printMyName.apply(window); //XML
    printMyName.apply(o);      //CSS
  </script>
</head>
<body>
</body>
</html>

Click to view the demo

printMyName() is defined as a global function, and when it's called in the global scope, it displays "XML" because this.myName evaluates to window.myName.

You can then call the function explicitly in the global scope by using printMyName.call(this) and printMyName.call(window), which both display "XML". Running printMyName.call(o) switches the context of the function such that this points to o, resulting in a display of "CSS".

function call()

functionName.call() calls the function with this value, and set this inside the function body.

The first argument is the this value, and the remaining arguments must be enumerated specifically.


function sum(num1, num2){//from   ww w .  j a  v a 2 s  .  co  m
   return num1 + num2;
}

function callSum(num1, num2){
   return sum.call(this, num1, num2);
}

console.log(callSum(10,10));   //20

The code above generates the following result.

Augment this in function.call()

call() can augment the this value inside of the function.

<!--  w w w  .  ja v a  2s. c om-->
<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
    window.myName = "XML";
    var o = { myName: "CSS" };
    
    function printMyName(){
       console.log(this.myName);
    }
    
    printMyName();            //XML
    
    printMyName.call(this);   //XML
    printMyName.call(window); //XML
    printMyName.call(o);      //CSS
  </script>
</head>
<body>
</body>
</html>

Click to view the demo

printMyName() is defined as a global function, and when it's called in the global scope, it displays "XML" because this.myName evaluates to window.myName.

function bind

function bind() method creates a new function instance whose this value is bound to the value that was passed into bind().

<!--from   ww  w. j  a  v  a  2s.c o  m-->
<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
    window.myName = "XML";
    var o = { myName: "CSS" };
    
    function printMyName(){
       console.log(this.myName);
    }
    var bindedPrintMyName = printMyName.bind(o);
    bindedPrintMyName();   //CSS
  </script>
</head>
<body>
</body>
</html>

Click to view the demo

bindedPrintMyName() is created from printMyName() by calling bind() and passing in the object o. this value in bindedPrintMyName() points to o. Calling bindedPrintMyName() in global context outputs "CSS" .

function.toString()

For functions, the methods toLocaleString() and toString() always return the function's code.


var f = function sayColor(){ 
   console.log("asdf"); 
} 
console.log(f.toLocaleString());

The code above generates the following result.