为什么异步回调中的 `this` 指向全局对象 `window` 而不是预期对象？

this作用域疑窦

在一段代码中，我们看到如下情况：

var obj = {
    x: 100,
    y: function () {
        setTimeout(function () { alert(this.x); }, 2000);
    }
};

obj.y();

令人费解的是，调用obj.y()后，弹出的却是undefined，而不是预期的100。原因何在？

分析显示，问题出在匿名函数this的指向。在非严格模式下，匿名函数的this是全局对象window。因此，当匿名函数执行时，this指向window，而不是我们期望的obj。这导致了this.x取值为window.x，而window.x是undefined。

为了解决这个问题，可以采用以下方法：

• 使用箭头函数（es6）：箭头函数始终会绑定到其外围作用域，因此this指向正确。
• 绑定this：通过bind方法或箭头函数，将this绑定到期望的对象。
• 使用严格模式：严格模式下，在匿名函数中this为undefined，避免了与window的混淆。

通过上述方法，我们可以确保在异步回调中，this始终指向正确的对象。

以上就是为什么异步回调中的 `this` 指向全局对象 `window` 而不是预期对象？的详细内容，更多请关注其它相关文章！