javascript - 在 javascript 的嵌套函数中与 'this' 关键字混淆

Question

我对 javascript 'this' 有疑问。我知道'this'指的是调用函数的对象。在示例 1 中，如果我们正在调用 obj.bar()，为什么 this.x = 4

var x = 4,
obj = {
    x: 3,
    bar: function() {
        var x = 2;
        setTimeout(function() {
            var x = 1;
            alert(this.x);
        }, 1000);
    }
};
obj.bar();

输出:4

而在下面的代码中，为什么 this.x =3 和 1 之后:

var x = 3;
var foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return this.x;
        }
    }
}
var go = foo.baz.bar;
alert(go());
alert(foo.baz.bar());

输出:3,1

Answer 1

当您在最顶层声明一个变量时，您是在 window 对象中创建一个全局变量。顶层的关键字 this 指的是 window。

var x = 4; // same as `window.x = 4`;
console.log(x); // same as `console.log(this.x)`;

当您调用 obj.bar() 时，this 关键字引用 bar 内的 obj。但是在 setTimeout 中，您有一个不同的 this，它指的是您传递给 setTimeout 的回调的调用者。这个调用者没有为 this 指定一个值，所以它只是变成了 window 对象。因此，在这段代码中:

setTimeout(function() {
   var x = 1;
   alert(this.x);
}, 1000);

this.x 与 window.x 相同，它是 4，正如您在上面定义的那样在全局范围内。

针对您的第二个示例，当您将一个函数分配给一个变量时，您会丢失该函数来自何处的上下文:

var go = foo.baz.bar;

现在，当您调用 go() 时，请注意该调用中没有点，这意味着没有显式对象访问，这意味着没有隐式 this。在这种情况下，您仍然可以使用 call 传递 this:

// outputs `3` because `this` is `window`, and `window.x` is `3`
// as declared in the global scope
alert(go());

// Will output `2` because `this` is `foo`
alert(go.call(foo));

// Will output `1` because `this` is `foo.baz`
alert(go.call(foo.baz));

// Will output `1` because the implicit value of `this` is `foo.baz`
// since we have an explicit object access in this function call
alert(foo.baz.bar());

您可以使用 use strict 避免许多此类问题.在严格模式下，this 在未显式或隐式定义时将是未定义的，而不是默认为 window 对象。