JS中的this指向问题(详细版)

JS中的this指向问题()

1. 在全局作用域中

   =>this -> window

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

2. 在普通函数中

   =>this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关

    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

   箭头函数没有自己的this，箭头函数的this就是上下文中定义的this，因为箭头函数没有自己的this所以不能用做构造函数。

    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

   事件源.onclik = function(){ } //this -> 事件源

   事件源.addEventListener(function(){ }) //this->事件源

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

5. 定时器中的this

   定时器中的this->window，因为定时器中采用回调函数作为处理函数，而回调函数的this->window

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

6. 构造函数中的this

   构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象，所以构造函数中的this->实例化对象

   new关键字会在内部发生什么

   //第一行，创建一个空对象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