變幻莫測的this指向

一.變幻莫測的this指向

在前端的面試中，this 指向與面向對象是必考題，也是平常開發中繞不開的話題，不少前端
老鳥也會在this 指向這裏掉坑。本節課圍繞this 指向問題,去分析this 在不一樣環境下的不一樣指向。

1.透徹認識function 的this 在不一樣調用環境下的指向

1. 事件調用環境誰觸發事件，函數裏面的this 指向的就是誰。

2. 全局環境 瀏覽器非嚴格模式環境window，嚴格模式環境undefind node環境module.exports

   console.log('全局this',this); // window

   

3. 函數內部
   【this 最終指向的是調用它的對象】
   · 普通函數直接調用與window 調用

   let box = document.querySelector('.box');
       let lili = document.querySelector('.lili');
       box.onclick = move;
       lili.onclick = move;
   
       function move(){
           this.style.left = '100px';
           console.log('事件this', this) // this指向點擊元素(box或lili)
       }

   

   · 對象中的函數直接調用與window 調用

   var obj ={
           a:10,
           b:function(){
               console.log('tag', this)
           }
       }
       window.obj.b()  // 對象obj
       obj.b()         // 對象obj

【函數被多層對象所包含，若是函數被最外層對象調用，this 指向的也只是它上一級的對象】
· 多層對象中的函數的this 指向

var obj = {
             a:10,
             b:{
                 fn:function(){
                     console.log(this);
                 }
             }
         }
         window.obj.b.fn();  // 對象b
         obj.b.fn();         // 對象b

· 對象中的函數被賦值給另外一個變量

a:10,
             b:{
                 fn:function(){
                     console.log(this);
                 }
             }
         }
         var abc = obj.b.fn;
         abc();              // window
         abc.call(obj);      // 對象obj

![image.png](https://upload-images.jianshu.io/upload_images/17618149-2deeca8a24e3f5b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

【構造函數中的this 指向的是實例對象】

· 構造函數中的this 指向
   · new 運算符的做用
   【若是構造函數中有return 若是return 的值對象，this 指向返回的對象，若是不
   是對象，則this 指向保持原來的規則，在這裏，null 比較特殊】

2.瞭解箭頭函數中的this 指向的特殊性

箭頭函數自己是沒有this 和arguments 的，在箭頭函數中引用this 實際上調用的是定義
是的上一層做用域的this。這裏強調一下是上一層做用域，因對對象是不能造成獨立的做用
域的。

3.掌握如何改變this 指向

call / apply / bind