Call,apply,bind

In JavaScript, call and the apply bind Function three methods that the object comes with, it is to change this the direction within the body of the function.

           apply 、 call 、bindThe first parameter of the three is the this object to point to, that is, the context you want to specify;

           apply 、 call 、bindAll three can use the following parameters to pass the parameter;

Bind is to return the corresponding function , which is convenient to call later; apply 、call

Example:

1.

 function fruits () {} fruits.prototype  = { Color:   " red  "   "  my color is   " + this  .color); }}  var  apple = new   fruits;   Apple.say ();  //  This means fruits  //  result: My color is red  

But if we have an object banana= {color : ‘yellow‘} and we don't want to redefine the say method, then we can use call or apply with Apple's say method:

Banana ={color:'Yellow'}apple.say.call (banana); //this point of this is already the same as the call () method has changed, pointing to the banana,this.color is banana.color= ' yellow ';//The result is that my color is yellowApple.say.apply (banana);//Similarly, this point of this is already the same as the Apply () method has changed, pointing to the banana,this.color is Banana.color = ' yellow ';//My color is yellow//If NULL is passed in:apple.say.apply (NULL);//null is under window, at this point, this points to the window, but the window does not clolr this property, so THIS.CLOLR is window.color=undefined;//My color is undefined

2. For both apply and call, the function is exactly the same, except that the parameters are accepted in a different way. call is to pass parameters in order, and apply to put parameters in the array.

varArray1 = [ A,'Foo', {name:'Joe'},-2458];varArray2 = ['Doe',555, -]; Array.prototype.push.call (Array1, array2);//here, with the call, the second parameter does not treat Array2 as an array, but an element//equivalent to Array1.push ("' Doe ', 555,");//array1.length=5;Array.prototype.push.apply (array1, array2);//here, apply the second parameter is an array//equivalent to: Array1.push (' Doe ', 555, +);//array1.length=7;

3. Class (pseudo) array using array method

varDivelements = document.getElementsByTagName ('Div');//Although divelements has the length property, he is a pseudo-array and cannot use the method inside the arrayArray.isarray (divelements);//false varDomnodes = Array.prototype.slice.call (document.getElementsByTagName ('Div'));//The this in array object arrays is pointed to the pseudo-array document.getelementsbytagname (' div '),//The Slice () method returns the selected element from an existing array, without passing the argument, returning the entire arrayArray.isarray (Domnodes);//true

4. Verify that the type of an object can be used:

5.bind()method, the MDN is interpreted as: The bind() method creates a new function, called a binding function, when the binding function is called.

The binding function takes the first parameter of the method that was passed in when it was created, and the bind() this second and future parameters of the passed-in bind() method

Number plus the arguments of the binding function itself are invoked in order as arguments to the original function.

 var  bar = function () {Console.log ( Span style= "COLOR: #0000ff" >this  .x);}  var  foo = {x:  3  }bar ();  //  undefined   var  func = Bar.bind (foo); //  This now points to Foo, but the bind () method does not execute immediately, but instead creates a new function that can be Bar.bind (foo) ()  if it is to be called directly. Span style= "COLOR: #000000" >func ();  //  3  

6. In Javascript, multiple times bind() are invalid. A deeper reason, bind() the equivalent of using a function in the internal package of one call / apply , the second bind() is equivalent to wrap the first time bind() , so the second time after the bind can not be effective.

varBar =function () {Console.log ( This. x);}varFoo ={x:3}varsed ={x:4}varFunc =Bar.bind (foo). bind (SED); func ();//3  varFIV ={x:5}varFunc =Bar.bind (foo). bind (SED). bind (FIV); func ();//3

7. apply、call、bind what are the similarities and differences between the three? When apply、call to use and when to use bind it. A simple example:

var obj = {  bayi,};   var foo = {  getx:function () {    returnthis. x;  }} Console.log (Foo.getX.bind (obj) ());   // Bayiconsole.log (Foo.getX.call (obj));    // Bayiconsole.log (foo.getX.apply (obj));   // Bayi

Reference:

• Apply, call, bind in JavaScript
• Function.prototype.bind ()
• Function.prototype.call ()
• Function.prototype.apply ()

Call,apply,bind