javascript - setTimeout范围问题

Question

我在控制玩家重生的函数内部定义了一个 setTimeout (我正在创建一个游戏):

var player = {
    ...
    death:(function() {
        this.alive = false;
        Console.log("death!");
        var timer3 = setTimeout((function() {
            this.alive = true;
            Console.log("alive!");
        }),3000);
    }),
    ...
}

当它执行时，我在控制台中读到“死亡!” 3秒后“还活着!”。但是，alive 永远不会真正设置回 true，因为如果我在控制台中写入 player.alive，它会返回 false。我怎么能看到“活着!”但变量永远不会设置回 true？

Answer 1

你必须小心这个。您需要将外部作用域中的 this 分配给一个变量。 this 关键字always指的是当前作用域的this，只要您将某些内容包装在 function() { 中，它就会发生变化。 .. }.

var thing = this;
thing.alive = false;
Console.log("death!");
var timer3 = setTimeout((function() {
    thing.alive = true;
    Console.log("alive!");
}),3000);

这应该会给你带来更好的成功。

更新 2019-10-09: 最初的答案是正确的，但现在可以为最新版本的 JavaScript 提供另一个选项。您可以使用箭头函数代替 function，它不会修改 this:

this.alive = false;
Console.log("death!");
var timer3 = setTimeout(() => {
    this.alive = true;
    Console.log("alive!");
}), 3000);

这是从 ES6 开始支持的，我认为这是除 IE(当然)之外的所有当前浏览器的一部分。如果您使用现代框架通过 Babel 或其他方式构建项目，该框架应该确保它在任何地方都能按预期工作。