“这个”上下文输出无法理解

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