js 中 this 的指向問題

2022-03-03 09:58:03 字數 2649 閱讀 5322

高程上的大前提:

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指向問題

解析器在呼叫函式時,每次都會向函式內部傳遞進乙個隱含的引數,這個隱含的引數就是this,this指向的是乙個物件,這個物件我們稱之為函式執行的上下文物件,根據函式的呼叫方式不同,this會指向不同的物件.簡單來說一下函式中this指向問題,1.this是什麼?任何函式本質上都是通過某個物件來呼叫的,...

JS中this指向問題

函式內部的this之和函式的呼叫方式有關,和函式的定義方式沒有關係functionfn fn windowvar obj obj.fn obj functionfn 或者可以這樣寫自呼叫函式 functionfn div document.queryselector div div.onclick ...

JS中this指向問題

與其它語言相比,js的this關鍵字的指向稍微有點差別。一 全域性環境 首選我們要明確一點,在全域性環境中 在任意函式體外部 無論是嚴格模式還是非嚴格模式,this都指向window。下面,我們來通過幾個例子理解一下。示例1 console.log this 這裡的this在全域性域下,指向wind...