js函式中this的指向

2022-08-01 01:15:10 字數 1508 閱讀 5076

本文是我個人對this指向的一些理解,如有不足之處,還望大家可以批評指正,在此先謝過了!

首先,我們來回顧一下es5裡函式的幾種呼叫方式:

1⃣️直接呼叫

foo();

2⃣️方法呼叫

obj.foo();

以上兩種呼叫方法,this的指向可以這樣去確定: 函式的呼叫者就是this的指向!

例如 obj.foo(); 裡.foo()前面obj就是呼叫者,所以this的指向就是obj,而直接呼叫的foo()等價於window.foo();這樣的話,上面兩種呼叫方法的this指向就顯而易見了,1⃣️的this是window,2⃣️的this是obj

舉個栗子:

1.關於直接呼叫

function foo()

foo()

這個foo()等價於window.foo(),所以this的指向就是window

2.關於方法呼叫

var obj = 

}obj.foo();

這裡foo的呼叫者是obj,所以this的指向就是obj

function fn ();

function fn2();

var arr = [fn, fn2]

arr[0]();

我擦,這個也沒有點語法(就是obj.foo())呼叫,看樣子長得很像foo()這種呼叫方式,那它的this指向是window嗎?ma蛋,事實上並不是,它的this指向的是arr,那麼為什麼呢?

首先arr是乙個陣列,而陣列也是物件,也就是obj,訪問obj內部元素有兩種方式[]語法和.語法,也就是obj[key]和obj.key,陣列裡面的index就可以看作是obj裡的key,所以在這裡,它不是沒有點語法呼叫嗎?那我們就給他改造成點語法,也就是這樣arr.0(),最後也就不難理解,這個this的指向就是arr了,但切記,陣列裡面內容的訪問只能是arr[index]語法,實際應用千萬不要寫arr.index!!!這裡只是為了方便理解。

小結:

2.obj.foo();的this指向就是obj

3.直接呼叫foo();轉換成點語法呼叫就是window.foo();所以this的指向就是window;

4.最噁心的就是那種看似是foo();的**們,這時候我們一定要想辦法給它轉換成點語法呼叫來幫助我們找到this指向(比如上面陣列的栗子)。

5.如果是一大串點語法呼叫的,像這樣 obj1.obj2.obj3.foo();  我們只需要看離foo最近的那個obj就行了,這個栗子裡的this指向也就是obj3;

總之一句話,套路再多我們也不用管,只要看到是誰最後呼叫的函式,函式內的this就指向誰!!!

最後祝願大家都不再被this指的暈頭轉向!!!

js函式中的this的指向

普通函式中的this是誰?window 物件.方法中的this是誰?當前的例項物件 定時器方法中的this是誰?window 建構函式中的this是誰?例項物件嚴格模式 use strict 嚴格模式 function f1 f1 普通函式 function f1 f1 定時器中的this seti...

JS中函式的 this 各種指向

this是js的乙個關鍵字,隨著函式使用場合不同,this的值會發生變化。但是總有乙個原則,那就是this指的是呼叫函式的那個物件。情形1 如果乙個函式中有this,但是它沒有被上一級的物件所呼叫,那麼this指向的就是window,這裡需要說明的是在js的嚴格版中this指向的不是window。一...

JS 函式中this的指向問題

解析器在呼叫函式每次都會向函式內部傳遞進乙個隱含的引數。這個隱含的引數就是this,this指向的是乙個物件。這個物件我們稱為函式執行的上下文物件,根據函式的呼叫方式不同,this會指向不同的物件。以函式的形式呼叫時,this永遠都是window。fn 以方法的形式呼叫時,this就是呼叫方法的那個...