使用函數內的“this”關鍵字訪問全局屬性

Question

我知道在javascript中，當你在函數中使用"this"關鍵字時，那么"this"將根據Quirksmode網站引用該函數的“所有者”。 因此，當我們有一個函數並且我們在其中使用"this"時，那么"this"指的是全局（窗口）對象。

我對"this"如何工作有點困惑，例如在下面的代碼中， "this"然后應該能夠解析x因為x幾乎是全局對象的屬性（在本例中是窗口）。 但是在這種情況下， this.x警告"undefined"而不是x值。

var x = "Global";

function foo(){
    alert(this.x);   //undefined     
};
foo();

然后我嘗試了其他一些事情：

function bar(){
    function foo(){
        alert(this); //[Object DOMWindow]
    };
    foo();
};

bar();

如果我的理解是正確的，那么'this'應該在第二種情況下引用bar() ，因為它是foo()的所有者，但為什么它仍然引用全局對象？

有人可以解釋關於“this”關鍵字的正確理論是什么？

Answer 1

你有錯誤的結局。 值this取決於該函數的調用 ，它不是如何定義的。

• 如果你調用window.foo()然后（在foo內） this將是window
• 如果你調用bar.foo()那么this將是bar （雖然你需要復制foo所以它首先是bar的屬性）
• 如果你調用baz.bar.foo()那么this將是bar （你只能通過this獲得父對象）
• 如果你調用foo.call(bar)那么this也是bar因為call可以覆蓋this
• 如果你調用new foo()那么this將是正在創建的新對象

默認對象是window ，所以如果你只調用foo()那么它與window.foo()相同。

函數定義的范圍無關緊要。

Answer 2

總結你的問題，你問為什么在你的第一個片段中， this.x是undefined ：

var x = "Global";
function foo(){
    alert(this.x);   //undefined     
}
foo();

它完全沒有意義， this值應該引用全局對象 - 如果你的代碼處於嚴格模式，你會得到一個TypeError ，因為this本身就是undefined - 。

我認為this.x可能undefined的唯一方法是x的變量聲明是在函數內完成的。

檢查以下兩個示例： 1和2 ，它們完全相同，不同之處在於第二個，代碼包含在onload事件處理程序中，因此x變量在全局范圍內不存在（ window.x undefined ）...

Answer 3

是的， this 始終是正在執行的函數的所有者和關於這個問題的最佳答案是比你曾經想知道this

var x = "Global";

function foo(){
    alert(this.x); // alerts "Global" for me    
};

至於bar()它是一個獨立的功能， this在上面鏈接的答案，這是你的情況描述將被綁定到“全局”對象DOMWindow

Answer 4

如果您真的想了解this工作原理，請閱讀10.3 Execution Context及以后的ECMAscript 262規范 。

以下是第10.4.3節中的內容：

10.4.3輸入功能代碼

當控件進入函數對象F中包含的函數代碼的執行上下文，調用者提供thisArg和調用者提供的argumentsList時，執行以下步驟：

1. 如果函數代碼是嚴格代碼，請將ThisBinding設置為thisArg。

2. 否則，如果thisArg為null或未定義，則將ThisBinding設置為全局對象。

3. 否則，如果Type（thisArg）不是Object，則將ThisBinding設置為ToObject（thisArg）。

4. 否則將ThisBinding設置為thisArg。

5. 設localEnv是調用NewDeclarativeEnvironment的結果，將F的[[Scope]]內部屬性的值作為參數傳遞。

6. 將LexicalEnvironment設置為localEnv。

7. 將VariableEnvironment設置為localEnv。

8. 設代碼為F的[[Code]]內部屬性的值。

9. 使用功能代碼和argumentsList執行聲明綁定實例化，如10.5中所述。