javascript - 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 的值？我基本上是在尝试从最后一点到刚刚单击的坐标画一条线(使用 Canvas )。

[编辑]

我不想绑定(bind) 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 并非在每个浏览器中都可用，需要填充以及额外的时间在执行时柯里化(Currying)函数。

self 是您将尽可能在 mootools-core 中找到的内容。

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

在带有 self 的模式 #2 中，this 将指向匿名函数中的点击处理程序(或其他类，例如)，这可能很有用同样——重新绑定(bind)上下文可能会让人头疼