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