js中this的指向問題

this指向問題一直困擾著我們，隨著後面框架的學習，感覺有些混亂，今天好好總結一下！！

首先要明白兩個問題：

1.this什麼時候確定？

this在函式被呼叫時確定

2.this指向誰？

當前擁有this的函式被誰呼叫，this就指向誰

總結一句話就是：弄清擁有this的函式被誰呼叫

分為以下幾種情形：

1）全域性作用域下

直接列印this，我們可以看到它是指向window

1 console.log(this);//
window

宣告乙個函式，如果函式沒有被呼叫，它裡面的this我們是不知道指向的，控制台什麼都沒有輸出

1
function
fuc()

如果我們呼叫了，指向的是window

1
function
fuc()
4         fuc();

宣告乙個函式並將它賦值給乙個變數，然後呼叫，this指向window

1
var func= function
()4         func();

自執行函式：自執行函式就是當它被定義出來，就會自動執行的函式。它的this指向window

1      (function () )();

作為函式呼叫時，不管你怎麼巢狀，指向的是全域性物件，也就是window（

嚴格模式下，this是未定義的（undefined）

）

1
var func= function()4
function
say()
8         say();

2）作為物件的方法呼叫時，this指向的是該方法所屬的物件

1
var person =3}
4     person.run() //
person

下面來乙個複雜的例子，原理相同：

1
var q = 'window'
2var func = function
()       56
var obj =13}
14         func();//
window
15         obj.func()   //
obj16         obj.anotherobj.func() //
anotherobj

3）建構函式中this，指向的是建構函式新建立的這個物件。

1
function
pro();4}
5var p = new pro();

4）事件繫結中的this，一般情況下是指向接受該事件的元素，當然也有特殊。

事件繫結有：行內繫結，動態繫結，事件監聽。

行內繫結：行內繫結事件的語法是在html節點內，以節點屬性的方式繫結。

注意加粗部分：當事件觸發時，屬性值就會作為js**被執行，相當於函式呼叫。

127

動態繫結和事件監聽原理相同：為節點物件的屬性重新賦值乙個匿名函式。

5）window定時器中的this

setinterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。第乙個引數要呼叫乙個**串，也可以是乙個函式。

setinterval(obj.fun,1000)的第乙個引數是obj物件的fun，在 js 中函式可以被當做值來做引用傳遞，實際就是將這個函式的位址當做引數傳遞給了setinterval方法，換句話說就是setinterval的第一引數接受了乙個函式，那麼此時1000毫秒後，函式的執行就已經是在window物件下了，也就是函式的呼叫者已經變成了window物件，所以其中的this則指向的全域性window物件；

而在setinterval('obj.fun()',1000)中的第乙個引數，實際則是傳入的一段可執行的 js **；1000毫秒後當 js 引擎來執行這段**時，則是通過obj物件來找到fun函式並呼叫執行，那麼函式的執行環境依然在物件obj內，所以函式內部的this也就指向了obj物件。

6）箭頭函式是乙個普通函式：

1
var a = 0
2var test = ()=>
test();//0this總是指向詞法作用域，也就是該例中的外層呼叫者window：

箭頭函式是物件的方法：

1
var a = 0
2var obj =7}
89 obj.foo()  //
0

解析上述**：

vara =0;
varobj =newobject；obj.a =1；obj.foo =()=>obj.foo()
由於箭頭函式不繫結this， 它會捕獲其所在（即定義的位置）上下文的this值， 作為自己的this值，foo在全域性中定義,所以this指向window。

如果想要讓this指向obj這個物件我們可以這樣修改

1
var a = 0
2function
foo()
6return
func7}
8var obj =
12 obj.foo()()  //
1

在函式foo（）中返回了func（），func（）是在foo（）被呼叫時定義的，所以箭頭函式func（）會把foo（）中的this作為自己的this，而foo（）是被obj呼叫的，擁有this的函式被誰呼叫this就指向誰，所以foo（）的this指向obj，因此箭頭函式中的this指向obj。

箭頭函式是建構函式：因箭頭函式沒有this,固不能用作建構函式，否則會報錯

1
var foo = ()=>
4var boo = new foo()  //
foo is not a constructor

js中this的指向問題

JS中this指向問題

JS中this指向問題

JS中this指向問題

js中this的指向問題

JS中this指向問題

JS中this指向問題

JS中this指向問題

相關推薦