Talking about this pointing problem in js

this refers to the current object. If this is used in the global scope, it refers to the current page window; if this is used in a function, this refers to what is called according to what object the current function is on. We can use call and apply to change the specific point of this in the function.

console.log(this === window)  // true
console.log(window.alert === this.alert)  // true
console.log(this.parseInt("021",10))  // 21

parseInt(string,radix);
// When only one parameter is used, we all know to convert it to an integer;
// The value of radix is ​​2~36, indicating that the current number is in decimal, and the number is converted into decimal. When it is not in this range, NaN will be output;          

The this in a function is determined at runtime, not when the function is defined.

function foo(){
            console.log(this.fruit);
    }
    // Define a global variable, equivalent to window.fruit = "banana"; 
    var fruit = "banana" ;
     // this time in the function points to window; 
    foo();   //    "banana"
    
    var   o = {
          fruit : "apple",
          foo : foo    
    };
    // this time in the function points to o 
    o.foo();   // "apple"

The global functions apply and call can be used to change the pointing of this, as follows: (The only difference between apply and call is that when passing parameters, the parameters of apply need to be placed in an array, but call does not need)

function foo(){
            console.log(this.fruit);
    }
    // Define a global variable, equivalent to window.fruit = "banana"; 
    var fruit = "banana" ;

    var   o = {
          fruit : "apple"
    };
    
    foo.apply(window);  // "banana";
    foo.call(o);  // "apple";

Because in JavaScript, functions are also objects, let's look at the following example:

function foo(){
  2           if ( this === window){
  3 console.log("this is window" );
  4          }   
  5      };
  6      // Function foo is also an object, you can define properties for the object, and then the properties are functions 
 7 foo.boo = function (){
  8          if ( this === foo){
  9 console.log("this is foo" );       
 10 } else  if ( this === window){
 11 console.log( "this is foo" ); is window" );
 12             }
13     };
14     
15      // equivalent to window.foo(); 
16 foo();   // "this is window"; 
17      // you can see that this in the function points to the object that called the function 
18 foo.boo();   // " this is foo"; 
19      // You can use call to change this in the function to point to 
20 foo.boo.call(window); // "this is window";

The this point of the nested function in the object is not the current object, but the window, see the following example:

var name = "window.name";
      var obj = {
          name : "obj.name",
          getName:function(){
              console.log(this.name);
              return function(){
                  console.log(this.name);
              }
          }
      }
      obj.getName()();  // "obj.name"  "window.name"

It is also the methods in getName and getName called by obj, but the results are different values, which means that this in the nested function no longer points to the current object, but points to window.

So, how do we solve the above problems? There are three main solutions, as follows:

1. Use the bind method of the function to bind the current this;

 var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return function(){
 7                   console.log(this.name);
 8               }.bind(this);
 9           }
10       };
11       obj.getName()();  //  "obj.name"  "obj.name"

2. Use a variable to receive the above this, and then do not use this below, use that variable;

 var name = "window.name";
 2       var that = null;
 3       var obj = {
 4           name : "obj.name",
 5           getName:function(){
 6               that = this;
 7               console.log(this.name);
 8               return function(){
 9                   console.log(that.name);
10               }
11           }
12       }
13       obj.getName()();  //  "obj.name"    "obj.name"

3. Using ES6 arrow functions can perfectly avoid this problem;

 var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return () => {
 7                   console.log(this.name);
 8               }
 9           }
10       }
11       obj.getName()();    //  "obj.name"    "obj.name"