"这个"上下文输出无法理解

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;是在window的上下文中执行的，并成为window的属性。当访问this函数内部时foo，这将指向window这种特定情况。

第三种情况，

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

您只需将objas绑定this到 function foo。即使函数在窗口上下文中计算，绑定this值也不会改变。这就是函数背后的规则bind。所以这里this不会改变。objwindow