--外功篇-《JavaScript那些事》-01-理解This指向--

功法小傳

近日的小蝦米，在研習JavaScript招式的過程中，博採眾長，勤奮練習，翻閱古籍。 終了然JavaScript招式中，容易引人走火入魔的變數之一——this指向！ 雖不敢說完全瞭然，但其基本理解，心中有數。 對日後行走江湖，多有裨益。 於是，匆匆記下，以備後事之需：

內容正傳

JavaScript的this指向問題： 在我們使用JavaScript操作dom時，經常會使用this來引用當前物件。但有時候，往往預料之中的指向卻出現個指向錯誤的問題。 近日，小蝦米翻閱了《你不知道的JavaScript》這本書，對其中的this講解做一個總結和筆記吧。

呼叫棧

首先需要明白，JavaScript的呼叫棧的概念。 ` function three() { console.log("three has done!") }

function two() { three(); console.log("two has done!") }

function one() { two(); console.log("one has done!") }

one(); //輸出： // three has done! // two has done! // one has done! ` 在這個程式碼片段中，我們通過one進行了one->two->three的呼叫。 由輸出可以知道，先進入呼叫棧的函式最後執行。

this的執行方式

this並不是在函式宣告時執行的，而是在函式執行中才執行。 因此，this的指向就與this所處的函式以及函式的狀態有關。

this指向的判斷

上文中提到“this所處的函式以及函式的狀態”，就是傳說中的“上下文”。 這麼解釋起來還是有些抽象。 舉個程式碼例子： 1. var val = 2; function a() { console.log(this.val); } a(); //輸出： // undefined 這個程式碼片段中的this指向的是全域性，因為a函式所處於全域性環境中； 2. ` function a() { console.log(this.val); }

var obj = { val: 1, a: a } obj.a(); // 輸出: // 1 ` 這個程式碼片段中的this指向的是obj，因為a函式所處於obj物件的環境中； 這裡，我們就已經解決完一般函式中的this指向問題了。

PS：有人會將“上下文”理解為this作用時其所處的物件作用域中。這種理解在大部分情況下是這樣，但在JavaScript底層的執行過程中並不是如此。

有關this的隱式繫結

this繫結中，還存在一下程式碼片段的問題： ` obj = { val: 1, a: function() { console.log(this.val); } }

function fnc(fn) { fn(); } fnc(obj.a); // 輸出: // undefined ` 看到這裡肯定會疑惑，a明明是所處於物件obj中的，為什麼輸出的是undefined這個全域性環境才有的結果呢？ 記得this的執行原理嘛？this是在程式碼執行時進行指向。 fnc在執行時，是將obj中的a函式，作為fnc的形參傳入fnc中，因此，this的指向與fnc所處環境有關，而與obj無關了。 這就是this的隱式繫結。

關於new繫結和硬繫結

在JavaScript中，我們經常使用new來進行建構函式的例項化，這個過程也是建立了物件，其例項化物件的this指向與之前所講的物件中的this指向沒什麼區別 關於硬繫結，是我們使用call、apply、bind進行this強制指向傳入物件的方法，來達成我們需要this指向特定物件的目的。

PS：記錄至此，若日後還有補充，則另開篇再記錄~