apply, bind, call-- this method of binding

Function.prototype.call(),Function.prototype.apply(),Function.prototype.bind()

This changing internal functions are the three points (i.e. where the function is executed when a scope) method.

 

1.Function.prototype.call(thisValue, param1, param2,....)

1) The first argument

The first argument must be an object,

• If it is empty, undefine, null by default bound to the window;
• If the type of base (e.g., character, numeric, boolean) automatically into the base type package types, such as: Number (5)
• If it is this, it is bound to represent the current scope

var n = 123;
var obj = {
    n: 456
}
function a() {
    return this;
}
// this === window
a.call(); // window
a.call(null); // window
a.call(undefine); //window
a.call(window); // window
// this === obj
a.call(obj); // obj
// this === 包装对象
a.call(5); // Number(5) {[[PrimitiveValue]]: 5}

2) The remaining parameters

The rest of the parameters passed as a parameter of the function call

function the Add (A, B) {
   return A + B; 
} 
// this represents a fixed point of this current; === this window 
add.call ( this ,. 1, 2); // . 3

3) Application

// native method invocation object
 var obj = { 
  A: . 5 
} 
the console.log (obj.hasOwnProperty ( 'toString')); // fasle 
obj.hasOwnProperty = function () { // covered obj object inherits from the prototype chain the method of 
  return  to true ; // change is itself obj methods, methods prototype chain constant 
} 
the console.log (obj.hasOwnProperty ( 'toString')); // to true 
// obj chain may be used on the prototype method , represents obj scope hasOwnProperty method using 
the console.log (Object.prototype.hasOwnProperty.call (obj)); // to false

2. Function.prototype.apply(thisValue, [param1, ....])

1) the same as the first argument and a method of call rules

2) The second parameter

The second parameter is an array , the array parameters were as arguments to the call

function add(a,b) {
  return a + b;
}
add.apply(this, [1, 2])

3) Application

// 1) Find the maximum value of the array 
const ARR = [l, 3,5 ]; 
Math.max.apply ( null , ARR); // . 5 
// also 
Math.max (ARR ...); // 5 

// 2) array of entries into empty undefined; undefine can be traversed are traversed function ignores empty 
const ARR = [. 1,,. 4 ]; 
Array.apply ( null , ARR); // [. 1, undefined , 4] array array constructor is

 

3. Function.prototype.bind(thisValue, params, param2...)

1) The first argument

The same call, apply methods

2）

 

4. apply.call, the difference between the bind

1) method call after call and apply, immediately after the implementation of this equivalent binding

2) bind method returns a new function that is not implemented immediately

application:

1) the class into an array of arrays

// 1) into an array of arrays based 
// Apply, Call method executed immediately 
Array.prototype.slice.apply ({0: 1, length: 1 ,}); 
Array.prototype.slice.call ({ 0: 1 , length:. 1 ,});
 // the bind method of generating a new function needs to be performed manually, behind the increase () 
Array.prototype.slice.bind ({0:. 1, length:. 1,}) ();

2) binding object to the callback function

// 2) target binding callback function; 
// before not bound, this callback function generally window
 var name = 'the Hello World' ;
 var obj = { 
  name: 'Lyra' , 
  Times: [ . 1 , 2,4 ], 
  Print: function () { 
    the console.log ( the this === obj); // to true 
    the this .times.forEach ( function () { 
      the console.log ( the this === window); // to true 
      the console.log ( the this .name);   // the Hello World 
    }) 
  } 
}
obj.print (); 

// bind in this callback method using the bind
 var name = 'the Hello World' ;
 var obj = { 
  name: 'Lyra' , 
  Times: [ 1, 2,4 ], 
  Print: function ( ) {
     the this .times.forEach (( function () { 
      the console.log ( the this ); // obj --3 times 
      the console.log ( the this .name);   // Lyra --3 views 
    } .bind ( the this )) ) // can not call, apply to replace, because it will be executed immediately, it is no longer a function, the function returns the default return value undefined 
  } 
} 
obj.print (); 

//Use call, apply the method to bind the callback function the this;
 var name = 'the Hello World' ;
 var obj = { 
  name: 'Lyra' , 
  Times: [ 1, 2,4 ], 
  Print: function () { 
    const that = the this ;
     the this .times.forEach (( function () { // because apply, call will be executed immediately, so nested one function 
      ( function IIFE () { 
        the console.log ( the this ); // obj --3 times 
        console.log ( the this .name);   //Lyra --3 times
      }) Call (that);. // can be replaced apply. IIFE need to expand it into a function expression in parentheses. Otherwise, the function declaration can not call the call method. 
    })) 
  } 
} 
Obj.print ();