在Javascript中的事件處理程序中訪問類成員變量

我有一個關於從類使用的事件處理程序內部訪問Javascript類成員變量的正確方法的快速問題。例如：在Javascript中的事件處理程序中訪問類成員變量

function Map() { 
    this.x = 0; 
    this.y = 0; 

    $("body").mousemove(function(event) { 
     this.x = event.pageX;  // Is not able to access Map's member variable "x" 
     this.y = event.pageY;  // Is not able to access Map's member variable "y" 
    }); 
}

而不是改變「地圖」類的成員變量中，「this.x」的事件處理程序試圖影響觸發事件的元件的「X」成員變量。從事件處理程序中訪問「Map」類的成員變量的正確方法是什麼？

任何幫助將不勝感激 - 我一直在這樣撓撓我的頭。

乾杯，查理

來源

2010-06-19 candrews

由於this變化的事件背景下（點global通常情況下），你需要存儲到自己的參照事件之外：

function Map() { 
    this.x = 0; 
    this.y = 0; 
    var _self = this; 
    $("body").mousemove(function(event) { 
     _self.x = event.pageX;  // Is now able to access Map's member variable "x" 
     _self.y = event.pageY;  // Is now able to access Map's member variable "y" 
    }); 
}

來源

2010-06-19 15:25:30 Matt

的'上的事件處理程序this'值通常指向其中處理程序的約束，在這種情況下這'=== document.body'的DOM元素。 – CMS 2010-06-19 17:54:45

非常感謝您的快速響應！這工作像一個魅力，也很乾淨。謝謝！ – candrews 2010-06-19 20:29:23

的解決方案，馬特給了它可能的路要走。

想我要指出的是，你可以通過這樣的事件對象傳遞數據：

function Map() { 
    this.x = 0; 
    this.y = 0; 

// Pass object with data-------------v 
    $("body").bind('mousemove', {ths: this}, function(event) { 
      // access this via event.data 
     event.data.ths.x = event.pageX; 
     event.data.ths.y = event.pageY;  
    }); 
}

這只是您的信息。這實際上不是一個實際應用。馬特對局部變量的引用更有意義。

來源

2010-06-19 15:43:37 user113716

我不知道你可以這樣做 - 但這很有趣。你是對的，這裏不是一個非常實用的應用程序，但它可能在未來派上用場。謝謝你的提示！ – candrews 2010-06-19 20:33:10

我發現自己處於這是唯一的出路 - 謝謝！ – alearg 2016-08-11 16:15:46

您也可以使用JQuery.proxy來創建代理函數及其上下文。您可以將代理綁定到事件。

下面是一個例子：

var init_handler = $.proxy(this.init, this); 
$('#page_id').bind('pageinit', init_handler);

來源

2013-08-31 23:49:34

在Javascript中的事件處理程序中訪問類成員變量

回答

相關問題