變量這不會返回我所期望的

Question

在下面的虛擬示例代碼中，我創建了一個類（WindowResizer），它在調整窗口大小時會偵聽瀏覽器窗口，窗口重新調整大小後250毫秒計時器調用方法timerAlarm）屬於WindowResizer類。但是這個方法中的'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);