This in JS points to the problem (detailed version)

This in JS points to the problem()

1. In the global scope

   =>this -> window

   <script>
      console.log(this); //this->window
   </script>
   

2. In ordinary functions

   =>This depends on who calls, who calls me, this refers to whom, it has nothing to do with how to define

    var obj = {
         
         
               fn1:function() {
         
         
                   console.log(this); 
               },
               fn2:function(){
         
         
                   fn3() 
               }
           }
           function fn3() {
         
         
               console.log(this); 
           }
           fn3();//this->window
           obj.fn1();//this->obj
           obj.fn2();//this->window
   

3. This in arrow function

   The arrow function does not have its own this. The this of the arrow function is the this defined in the context. Because the arrow function does not have its own this, it cannot be used as a constructor.

    var div = document.querySelector('div'); 
       var o={
         
         
           a:function(){
         
         
               var arr=[1];
             //就是定义所在对象中的this
             //这里的this—>o
               arr.forEach(item=>{
         
         
                 //所以this -> o
                   console.log(this);
               })
           },
         //这里的this指向window o是定义在window中的对象
           b:()=>{
         
         
               console.log(this);
           },
           c:function() {
         
         
               console.log(this);
           }
       }
       div.addEventListener('click',item=>{
         
         
           console.log(this);//this->window 这里的this就是定义上文window环境中的this
       });
       o.a(); //this->o
       o.b();//this->window
       o.c();//this->o 普通函数谁调用就指向谁
   

4. This in event binding

   Event source.onclik = function(){} //this -> event source

   Event source. addEventListener(function(){ }) //this->event source

   var div = document.querySelector('div'); 
       div.addEventListener('click',function() {
         
         
           console.log(this); //this->div
       });
       
       div.onclick = function() {
         
         
       console.log(this) //this->div
       }
   

5. This in the timer

   This->window in the timer, because the callback function is used as the processing function in the timer, and this->window of the callback function

     setInterval(function() {
         
         
           console.log(this); //this->window 
       },500)
       
       setTimeout(function() {
         
         
           console.log(this); //this->window 
       },500)
   

6. This in the constructor

   The constructor is used in conjunction with new, and the new keyword will point the this in the constructor to the instantiated object, so this-> the instantiated object in the constructor

   What happens internally with the new keyword

   //第一行，创建一个空对象obj。
   var obj  ={
         
         };
   //第二行，将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象.
   obj.__proto__ = CO.prototype;
   //第三行，将构造函数的作用域赋给新对象，因此CA函数中的this指向新对象obj，然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p，这个成员变量的值是” I’min constructed object”。
   CO.call(obj);
   //第四行，返回新对象obj。
   return obj;
   

   function Person(name,age) {
         
         
           this.name = name;
           this.age = age;
       }
       var person1 = new Person();
       person1.name = 'andy';
       person1.age = 18;
       console.log(person1);//Person {name: "andy", age: 18}
       var person2 = new Person();
       person2.name = 'huni';
       person2.age = 20;
       console.log(person2);// Person {name: "huni", age: 20