JavaScript OOP 之 this指向

標籤：context   var   解釋   執行   es2017   運行時   上下   ...   logs   

今天給大家分享一個JavaScript OOP中關於分辨this指向對象的小技巧，很實用呦！

我們先來看一段代碼：

大家能判斷出func();和obj.func();這兩句的this指向嗎？

首先，我們都知道的是，this的指向就是最終調用函數的對象。可是最終調用函數的對象，你能清楚地判斷出來嗎？

但是，有幾點需要注意：

　　① this 指向誰，不應該考慮函數在哪聲明，而應該考慮函數在哪調用！

　　② this 指向的永遠只可能對象，而不可能是函數。

　　③ this 指向的對象 ，叫做函數的上下文context，也叫函數的調用者。 

　什麼是上下文context ？    

　　經常看到很多資料文檔都有提到上下文，但是都不是太好理解。相信很多人犯迷糊。現在嘗試把自己的理解寫出來，也算是梳理一下。

　　上下文 —— 我把它理解為當前運行環境，程式運行時，程式的每條語句都有對應的上下文，即運行環境。

　　可以想象一下語句執行前：有個內容物件，名稱是 context，內容物件是window對象，即： context = window。

　　直接調用函數func()，此時函數體內的內容物件就是window。

　　對象obj調用func函數，即：obj.func()  時，函數體內的內容物件就是window.obj對象。

　　this的值，就是運行到this代碼位置時，上下文所對應的內容物件。函數定義是並沒有運行console.log(this)語句，所以函數定義是this指向的對象還未定義，它的值是undefined，需要在函數調用時，邊解釋邊執行，執行 console.log(this) 時才分析調用函數是的上下文。最終確定this指向的值。

下面我們來看一下更多的情況，總結一下更多的規律，讓大家面對this不再糊塗：

【 接下來，我們詳細解讀一下 】

① 通過 函數名() 調用的，this永遠指向window。就是上述例子的第一個調用 func();

結果（window）

 

② 通過 對象.方法 調用的，this指向這個對象。就是上述例子的第二種調用方式 obj.func();

 

 結果（obj）

 

③ 函數 作為數組中的一個元素存在，用數組下標調用，this指向這個數組。

 結果（數組arr）

 

④ 函數作為 window 內建函數的回呼函數使用，this指向window 。

結果（window）

 

⑤ 函數作為建構函式，使用new關鍵字調用，this指向新new出的對象。

 

結果（objs）

【區分】在HTML中新增一個div，給div添加點擊事件。

<div id="div1" style="width: 200px;height: 200px;background-color: red;" onclick="func(this)">     這是一個div</div><script type="text/javascript">        window.onclick = function(){                 document.getElementById("div1").onclick = function(){          　　　　　　　　　func();   //  最終還是使用()調用，指向Window   　　　　　　　　 }                                             document.getElementById("div1").onclick = func;   // 廣義對象  通過對象.方法 調用的，this指向這個對象                   　　　　　　　  }              function func(){        console.log(this);    }</script>                    

 

規律咱們總結完了，接下來來兩個題目練練手吧！

 first one：

function func(){    console.log(this);            } var obj1 = {     name : "obj1",     arr : [func,1,{name:"obj2",func:func},3,setTimeout(func,1000)],
 }   　　　　　　　　　　 // 通過對象取到數組，然後通過數組的下標調用該函數，最終指向數組。this -> obj.arr  obj1.arr[0]();    　　　　　　　　　　　　　　　　　　  // obj1.arr[0]：目的是取到func，給setTimeout作為回呼函數，相當於setTimeout(func,2000)。this -> window  setTimeout(obj1.arr[0],2000);                obj1.arr[2].func(); 　　 // 最終調用者{name:"obj2",func:func}  屬於②情況  setTimeout(obj1.arr[2].func,2000); 　　// 最終調用者是setTimeout，同上

結果如下顯示：（調用了三次延時函數，包括一次自動調用）

 

second one：

    var fullname = ‘John Doe‘;        var obj = {           fullname: ‘Colin Ihrig‘,           prop: {              fullname: ‘Aurelio De Rosa‘,              getFullname: function() {                 return this.fullname;              }           }        };        console.log(obj.prop.getFullname());  // 函數的最終調用者 obj.prop                 var test = obj.prop.getFullname;         console.log(test());       // 函數的最終調用者 test()  this-> window                obj.func = obj.prop.getFullname;  // 給obj追加方法        console.log(obj.func());     // 函數最終調用者是obj                var arr = [obj.prop.getFullname,1,2];        arr.fullname = "TraceyW";        console.log(arr[0]());     // 函數最終調用者數組                    

結果如下顯示：

 

總結一下，this指向的規律，大家可以發現，這個規律跟函數的調用方式息息相關：

　　① 通過 函數名() 調用的，this永遠指向window。

　　② 通過 對象.方法 調用的，this指向這個對象。

　　③ 函數 作為數組中的一個元素存在，用數組下標調用，this指向這個數組。

　　④ 函數作為 Window 內建函數的回呼函數使用，this指向window。  如setInterval 、 setTimeout ...

　　⑤ 函數作為建構函式，使用new關鍵字調用，this指向新new出的對象。

挺有用的，拿走不謝！

有需要的點關注呦~~小W會經常更新小技巧呢！如有不完善的地方，敬請拍磚！蟹蟹~~

 

JavaScript OOP 之 this指向