JS中 this 到底指向誰？

YXi發表於2019-07-24
JS

JS中的 this 到底指向誰？

關於this的指向，確實是一個令人頭疼的問題，那麼this到底指向誰呢？

歸根到底一句話：誰呼叫了包含this的方法，那麼this就指向誰

關於這點，咳咳咳...有如下三個觀點：

1.this指向的，永遠只可能是物件！

2.this指向誰，永遠不取決於this寫在哪！而是取決於函式在哪呼叫。

3.this指向的物件，我們稱之為函式的上下文context，也叫函式的呼叫者。

  • 在全域性中，通過函式名直接呼叫，this就指向window

如下：

function Test(){

}
Test()
複製程式碼

此時，this就指向window

  • 通過物件.函式名()呼叫的：this就指向這個物件

如下：

let Test = {
	name:"Fan",
	say:function(){
		console.log(this.name)
	}
}
Test.say()	//Fan
複製程式碼

此時，this就指向Test

不過，匿名函式(比如：定時器)具有全域性性，因此this物件通常也指向window

  • 函式作為陣列的一個元素，通過陣列下標呼叫的，this指向這個陣列

如下：

function Test(){
	console.log(this);
}

let arr = [Test,1,2];
arr[0]();
複製程式碼

此時，this就指向arr

  • 函式作為window內建函式的回撥函式呼叫時，this就指向window，比如：setInterval setTimeout 等）

如下：

function Test(){
	console.log(this);
}

setTimeout(Test,1000);
// setInterval(Test,1000);
複製程式碼

此時，this就指向window

  • 函式作為建構函式，用new關鍵字呼叫時，this指向新new出的物件

如下：

function Test(){
	console.log(this);
}

let obj = new Test();
複製程式碼

此時，this就指向obj

  • 如果使用 call、apply、bind繫結物件，那麼this就指向那個繫結的物件

  • 箭頭函式

箭頭函式比較特殊，因為箭頭函式內部沒有this，this指向外層最近的呼叫者，簡單的說，就是需要向上找一級

  • 箭頭函式在呼叫時，不會生成自身作用域下的this和arguments
  • 不像普通函式一樣在呼叫時自動獲取this，而是沿著作用域鏈向上查詢，找到最近的外部一層作用域的this，並獲取
  • 在定義物件的方法/具有動態上下文的回撥函式/建構函式中都不適用

^_<

相關文章