Question

我有一个关于从类使用的事件处理程序内部访问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”类的成员变量。从事件处理程序中访问“Map”类的成员变量的正确方法是什么？

任何帮助都会非常感激 - 我一直在这个问题上摸不着头脑。

干杯，查理

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

Answer 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对局部变量的引用更有意义。

Answer 3

您还可以使用JQuery.proxy创建具有上下文的代理功能。您可以将代理绑定到事件。

以下是一个例子：

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

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

3 个答案: