在 Javascript 中访问事件处理程序中的类成员变量答案

【问题标题】：Accessing class member variables inside an event handler in Javascript在 Javascript 中访问事件处理程序中的类成员变量
【发布时间】：2011-03-05 19:07:39
【问题描述】：

我有一个关于从类使用的事件处理程序内部访问 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”并没有改变“Map”类的成员变量，而是试图影响触发事件的元素的“x”成员变量。从事件处理程序中访问“Map”类的成员变量的正确方法是什么？

任何帮助将不胜感激 - 我一直在摸索这个问题。

干杯，查理

【问题讨论】：

标签： javascript jquery oop event-handling

【解决方案1】：

由于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"
    });
}

【讨论】：

事件处理程序上的this 值通常指向绑定处理程序的DOM 元素，在本例中为this === document.body。
非常感谢您的快速回复！这就像一个魅力，也很干净。谢谢！

【解决方案2】：

Matt 给出的解决方案可能是可行的方法。

只是想我会指出你可以像这样通过事件对象传递数据：

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;     
    });
}

这只是为了提供信息。这真的不是一个实际的应用程序。 Matt 对局部变量的引用更有意义。

【讨论】：

我不知道你能做到这一点——不过这很有趣。你是对的，这不是一个非常实用的应用程序，但它可能会在未来派上用场。感谢您的提示！
我发现自己处于这样的境地，这是唯一的出路 - 谢谢！

【解决方案3】：

您还可以使用JQuery.proxy 来创建带有上下文的代理函数。您可以将代理绑定到事件。

这是一个例子：

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

【讨论】：