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在每个浏览器中都不可用，需要进行填充以及额外的时间来调整函数执行。

在可能的情况下，你会在mootools-core中找到

self。

如果性能没有风险，方法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 ++;
            }
        }
    });    
}
...

Mootools类变量范围

2 个答案: