Mootools 类变量范围

Question

参加这门课：

var MyClass = new Class({
    Implements: [Events, Options],
    initialize: function() {

        this.a = 1;

    },

    myMethod: function() {

        var mc = new differentClass({
            events: {
                onClick: function() {

                    console.log(this.a); // undefined (should be 1, 2, 3 etc)

                    this.a ++;


                }
            }
        });    

    }
});

如何保持 this.a 的值？我基本上是在尝试从最后一个点到刚刚单击的坐标画一条线（使用画布）。

[编辑]

我不想绑定this，因为它显然很糟糕，它会覆盖differentClass 选项。

Answer 1

有多种模式可供选择。

装饰者来自.bind()

var mc = new differentClass({
    events: {
        click: function() {
             console.log(this.a);
             this.a ++;
        }.bind(this) // binds the scope of the function to the upper scope (myclass)
    }
});    

保留参考。

var self = this; // reference parent instance of myClass
var mc = new differentClass({
    events: {
        click: function() {
             console.log(self.a); 
             self.a ++;
        }
    }
});    

指向一个可以处理它的myClass方法：

handleClick: function() {
    this.a++;
},
myMethod: function() {
    var mc = new differentClass({
        events: {
            click: this.handleClick.bind(this)
        }
    });    
}

第二个 - 由于占用空间较小且支持通用，因此首选存储引用，而 .bind 并非在每个浏览器中都可用，并且需要填充以及额外的时间在执行时对函数进行 curry .

self 是您可以在 mootools-core 本身中找到的内容。

如果性能没有风险，方法 3 可能会提供最佳的可读性和代码结构。该方法的参数将保留单击处理程序传递的内容，即event 和event.target 将是处理程序。

在带有self 的模式#2 中，this 将指向匿名函数中的点击处理程序（或指向其他类，例如），这也可能很有用 - 重新绑定上下文可能会很痛苦脖子

Answer 2

您可以像这样引用适当的上下文：

...
myMethod: function() {
    var _this = this;
    var mc = new differentClass({
        events: {
            onClick: function() {
                console.log(_this.a);
                _this.a ++;
            }
        }
    });    
}
...