js 中 this 的指向問題

高程上的大前提：

1、this 物件是在執行時基於函式的執行環境繫結的：在全域性函式中，this 等於window，而當函式被作為某個物件的方法呼叫時，this 等於那個物件；不過，匿名函式的執行環境具有全域性性，因此其this 物件通常指向window。

2、每個函式在被呼叫時都會自動取得兩個特殊變數：this 和arguments。內部函式在搜尋這兩個變數時，只會搜尋到其活動物件為止，因此永遠不可能直接訪問外部函式中的這兩個變數；

總結：

1、在事件處理程式中，事件繫結在哪個元素身上，this 就指向誰；分析戳這裡；

2、在方法呼叫（如果某個物件的屬性是函式，這個屬性就叫方法，呼叫這個屬性，就叫方法呼叫）中，執行函式體的時候，作為屬性訪問主體的物件和陣列便是其呼叫方法內 this 的指向。（通俗的說，呼叫誰的方法 this 就指向誰；）

3、普通函式執行裡的 this 都是全域性物件，非嚴格模式下瀏覽器端指的是 window（嚴格模式下 undefined,因為全域性變數物件裡沒有定義this），因為都是在全域性環境下執行的；

4、任意函式裡如果巢狀了函式，那這個時候巢狀函式裡的 this 在未指定的情況下，應該指向的是 window 物件（瀏覽器中非嚴格模式下，嚴格模式下返回 undefined ,因為巢狀函式裡活動物件未指定 this）；如果想在巢狀函式中繼續用原來的 this 指向，需要儲存下，比如 var self = this ，然後在巢狀函式中使用 self 變數，因為 this 不會傳遞；

這裡加個案例：

var arr = [1, 2, 3];
arr.map(
function
() );

你覺得這裡 this 是 arr 物件麼？

不是的，全域性環境下，輸出三個 window，你可能以為上面的理論錯了，其實不是，map 作為 arr 物件的方法，在 map 函式裡訪問 this 當然是 arr 物件，而這裡相當於在 arr.map 函式裡又巢狀了一層函式，沒指定的情況下，this 當然是 window，這裡容易混淆，注意理解；

這裡重寫了預設的 map 方法，方便理解：

var arr = [1, 2, 3];
arr.map = function
(fn) ;
arr.map(
function
() );

如果要把 map 裡的 this 儲存到巢狀的函式裡：

var arr = [1, 2, 3];
arr.map = function
(fn) ());
};arr.map(
function
() );

這樣就輸出兩次 arr 物件了，call 不會用點這裡

5、通過建構函式建立物件，在呼叫建構函式之前就已經建立了新物件，並將建構函式的作用域賦給了新物件，因此建構函式裡的 this 指向的就是這個新物件；

6、with 語句並沒有改變 this 的指向，不過表現確實有點奇怪，看截圖：

7、一些特殊情況，如：逗號運算子，賦值運算子

1
var name = "the window";
2var object =7};
8 object.getname(); //
"my object"
9 (object.getname)(); //
"my object"
10 (object.getname = object.getname)(); //
"the window"，在非嚴格模式下
11 (object.getname, object.getname)(); //
"the window"，在非嚴格模式下

第9行**解釋：

雖然加上括號之後，就好像只是在引用乙個函式，但this 的值得到了維持，因為object.getname 和(object.getname)的定義是相同的。

根據 mdn ，圓括號運算子()用來控制表示式中的運算優先順序。所以書上說，沒有改變 this，我覺得是說的過去的；

第10行**解釋：

**先執行了一條賦值語句，然後再呼叫賦值後的結果。因為這個賦值表示式的值是函式本身，所以this 的值不能得到維持，結果就返回了"the window"。

我的理解是，賦值表示式返回了記憶體中的乙個值，也就是函式本身，而不是原來方法的引用，所以 this 沒有得到維持，結果返回了 window;

第11行**解釋：

同上，因為根據 mdn ，逗號操作符也是返回最後乙個運算元的值，也是函式本身，所以和上面一樣；

按照這個邏輯的話，所有返回值操作的，都有可能去改變上面**中的 this 值，都需要謹慎，譬如：

var a =
};function
f(fn) 
f(a.func);
//window

因為函式中的引數也是按照值傳遞的，在向引數傳遞引用型別的值時，會把這個值在記憶體中的位址複製給乙個區域性變數。

js 中 this 的指向問題

JS中this指向問題

JS中this指向問題

JS中this指向問題

js 中 this 的指向問題

JS中this指向問題

JS中this指向問題

JS中this指向問題

相關推薦