“這個”上下文輸出無法理解

Question

我很難理解下面的代碼。

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

var a = 4;

obj.foo();
setTimeout( obj.foo, 100 );
setTimeout( obj.foo.bind(obj), 100 );

它的輸出為2,4,4，我無法理解。

Answer 1

第一種情況，

obj.foo();

當this內foo將指向obj ，因為您已經分配的功能為特定對象的屬性。

第二種情況，

setTimeout( obj.foo, 100 );

在setTimeout中，傳遞的函數將在窗口的上下文中進行eval 。 所以這里var a = 4; 在窗口的上下文中執行並成為窗口的屬性。 當在函數foo訪問this時，這將指向此特定情況下的window 。

第三種情況，

setTimeout( obj.foo.bind(obj), 100 );

你只需綁定的obj因為this給函數foo 。 即使在窗口的上下文中評估函數，也不會更改綁定this值。 這是bind功能背后的規則。 所以this不會從obj變成window 。

Answer 2

this關鍵字在差異上下文中的行為略有不同。

全球背景

在全局執行上下文中（在任何函數之外），這指的是全局對象，無論是否處於嚴格模式。

功能上下文

在函數內部，其值取決於函數的調用方式。

簡單的電話

function foo() {
    console.log(this)
}

在非嚴格模式下， this將默認為全局對象

在嚴格模式下， this將默認為undefined

call或apply

function foo() {
    console.log(this)
}
var o = {'name': 'test object'};
foo.call(o) // log object `o`

this可以使用call或apply方法綁定到調用中的特定對象。

bind

bind方法返回一個函數，該函數使用特定對象通過bind作為函數中的this對象。

function foo() {
    console.log(this)
}
var o = {'name': 'test object'};
bar = foo.bind(o)
bar() // log object `o`

有關更多信息，請參閱此鏈接： https ： //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

說明

在這種情況下obj.foo(); this功能的foo是obj ，所以this.a參考obj.a

在這種情況下setTimeout( obj.foo, 100 ); obj.too是函數foo的引用。 setTimeout將在全局上下文中執行它。

在這種情況下setTimeout( obj.foo.bind(obj), 100 ); ， obj.foo.bind(obj)返回到結合函數的引用this與obj 。 setTimeout將在obj上下文中執行它

Answer 3

您需要了解this行為方式。 它被稱為函數執行上下文，您可以在這里閱讀更多信息。

在第一種情況下，函數在對象obj的上下文中被調用，因為屬性訪問器. 使用（ obj.foo ），因此this指向obj 。

在第二種情況下，將獨立函數傳遞給setTimeout ，它將在全局上下文中調用， this指向窗口。 obj.foo()與var f = obj.foo; f() var f = obj.foo; f()

在第三種情況下，你勢必一個函數調用的情況下obj ，並且this點再次OBJ。 閱讀更多關於bind 信息 。

Answer 4

嘗試發出alert(this); 在foo（）方法里面了解上下文。

obj.foo(); =>在對象上下文中運行，因此結果將是值a內部obj => 2

setTimeout( obj.foo, 100 ); =>在窗口上下文中運行， var a = 4在窗口上下文中， this.a給出4（ this是window ）

並且最后一行將再次具有對象context => 2