Dynamically change the direction of this

this One of the most commonly heard words is ： It always points to the object that invokes it , But it ignores this The environment

• this The point of is context dependent
• this The point can only be confirmed when the function is called , It is not certain when defining
• this The value of is an object
• In the overall situation , In non strict mode and strict mode this All point to the top-level object （ Browser is window）.

1、call call
call() Method calls an object . Simply understood as the way to call a function , But it can change the function this Point to
Application scenarios : Often do inheritance .

var o = {
    
name: 'andy'    
}
 function fn(a, b) {
    
      console.log(this);
      console.log(a+b)
};
fn(1,2)//  At this time this Pointing to window  The running result is 3
fn.call(o,1,2)// At this time this Point to the object o, Parameters are separated by commas , The running result is 3

2、apply call
apply It's also a call function , You can change the inside of the function this The direction of , But his arguments must be arrays （ Pseudo array ）
Application scenarios : It's often related to arrays

var o = {
    
name: 'andy'    
}
 function fn(a, b) {
    
      console.log(this);
      console.log(a+b)
};
fn()//  At this time this Pointing to window  The running result is 3
fn.apply(o,[1,2])// At this time this Point to the object o, Parameters are passed using an array   The running result is 3

3、bind call
bind() Methods do not call functions , But it can change the inside of the function this Point to , Return is the original function change this Subsequent production
New function generated
If you just want to change this Point to , And when you don't want to call this function , have access to bind
Application scenarios : Don't call functions , But also want to change this Point to

var o = {
    
 name: 'andy'
 }; function fn(a, b) {
    
console.log(this);    
console.log(a + b);    
};
var f = fn.bind(o, 1, 2); // Here f yes bind New function returned 
f();// Call new function   this Point to the object o  Parameters are separated by commas 

call 、apply、bind The similarities and differences of the three

• Common ground ： Can change this Point to
• Difference ：
  1、call and apply Will call functions , And change the inside of the function this Point to .
  2、call and apply The parameters passed are different ,call Pass parameters separated by commas ,apply Pass... Using an array
  3、bind Does not call function , You can change the inside of the function this Point to .
• Application scenarios ：
  1、 call Often do inheritance .
  2、 apply It's often related to arrays . For example, with the help of mathematical objects to achieve the maximum and minimum value of the array
  3、 bind Don't call functions , But also want to change this Point to . For example, change the internal timer this Point to .