1. 程式人生 > >JavaScript中函式裡this的值到底指向誰?如何理解上下文context?

JavaScript中函式裡this的值到底指向誰?如何理解上下文context?

先看下面的程式碼:

var f = function(){
	var this_obj = this;
}
var o={name:"o"}
o.f = f;
f();  //此時呼叫時this_obj的值是window物件
o.f();//此時呼叫時this_obj的值是o物件

同樣都是 f  函式,單獨呼叫時this_obj的值是window物件,通過o物件呼叫時值確變為了o物件。那麼如何理解函式定義是this的值是什麼呢?

我的理解:

首先什麼是上下文context ?

經常看到很多資料文件都有提到上下文,但是都不是太好理解。現在嘗試吧自己的理解寫出來,也算是梳理一下。

上下文  我把它理解為當前執行環境,程式執行時,程式的每條語句都有對應的上下文,即執行環境。

//eg1. 定義一個全域性變數
var  global_var = "global";
<pre name="code" class="javascript">var this_obj = this;

比如上面的eg1. 可以想象一下語句執行前:有個上下文物件,名稱是_context,上下文物件是window物件,即:_context= window。

語句執行後,定義了一個全域性變數,即 window.global_val 。

這樣在接下來的程式碼使用global_val變數時,就會訪問上下文物件中查詢相應的變數 _context.global_val。

直接呼叫函式f(),此時函式體內的上下文物件就是window。

物件o呼叫f函式,即:o.f()  時,函式體內的上下文物件就是window.o物件。

o.test.f()函式體內的上下文物件就是window.o.test 物件。

this的值就是執行到this程式碼位置時上下文所對應的上下文物件。函式定義是並沒有執行this_obj = this語句,所以函式定義是this_obj物件還未定義,他的值是undefined,需要在函式呼叫時,邊解釋邊執行,執行this_obj = this時才分析呼叫函式是的上下文。才能確定this_obj的值。