在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中的事件处理程序中访问类成员变量

回答

相关问题