javascript - 变量 this 不会返回我期望的结果

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 8 年前。

在下面的虚拟示例代码中，我创建了一个类 (WindowResizer)，该类在调整大小时监听浏览器窗口，调整窗口大小后 250 毫秒，计时器调用属于 WindowResizer 类的方法 (timerAlarm) 。但此方法中的“this”变量是窗口对象。为什么？我应该怎么做才能到达 WindowResizer 的实例？

    <script>
    $(document).ready(function () {
        var windowResizer = new WindowResizer();
        windowResizer.name = "Tester";
        windowResizer.window = $(window);
        windowResizer.attachEvents();
    });

    function WindowResizer(window) {
        this.window = window;
    }

    WindowResizer.prototype.attachEvents = function () {
        var self = this;

        self.window.resize(function () {
            clearTimeout(self.windowResizeTimer);
            self.windowResizeTimer = setTimeout(self.timerAlarm, 250);
        });
    };

    WindowResizer.prototype.timerAlarm = function () {
        // Here the variable this is the window, but I want it to be the instance of WindowResizer that I created in the document ready-function, why!?
        console.log(this);
    }
</script>

Answer 1

另一个 setTimeout 函数内的 setTimeout 函数将在窗口范围内执行。您需要更改引用该方法的方式。

self.windowResizeTimer = setTimeout(self.timerAlarm, 250);

需要

self.windowResizeTimer = setTimeout(function(){self.timerAlarm();}, 250);

或

self.windowResizeTimer = setTimeout(self.timerAlarm.bind(self), 250);