javascript - 在 Mootools 中调用方法的正确方法？

Question

我在 mootools 中创建了一个类，当首次调用 initialize() 方法时，它会创建一个 div 元素，然后将其附加到 document.body。然后，我附加一个上下文菜单处理程序，当在浏览器中选择上下文菜单中的选项时，它将调用函数。

我遇到的问题是上下文菜单处理程序实际上不会调用任何函数，我不太明白为什么，想知道这里是否有人能发现问题？

这是我创建的类和附加的上下文菜单处理程序，为简洁起见，删除了一些其他代码:

var uml_Canvas = new Class({  
    initialize: function()
    {
        this.mainCanvasDiv = document.createElement("div");
        this.mainCanvasDiv.id = "mainCanvas";
        this.mainAppDiv.appendChild(this.mainCanvasDiv);
        this.paper = Raphael(this.mainCanvasDiv.id, 500, 400);
        this.paper.draggable.enable();

        $("#"+this.mainCanvasDiv.id).contextMenu('canvasPanel_Menu', 
        {
            bindings: 
            {
                'clear': function(t) 
                {
                    this.clearPaper();
                }
            }
         });  
    },
    clearPaper : function()
    {
        this.paper.clear();
    }
});

快速概览，创建了一个对象，该对象创建了一个 div，然后将其附加到正文。然后 div 分配了一个上下文菜单。当调用“clear”选项时，应该调用方法 clearPaper()，但由于某些原因它不是。但是，如果我用一个简单的 alert() 调用替换 this.clearPaper(); 行，它确实会运行。

谁能看出无法调用方法的原因？

顺便说一句，如果有帮助的话，我得到的错误是this.clearPaper is not a function。

Answer 1

尝试将“this”绑定(bind)到你的 clear 函数:

'clear': function(t) 
{
    this.clearPaper();
}.bind(this)

这采用“this”范围并允许匿名函数使用它，就好像它是该类的成员一样。

请注意，无论何时您尝试使用“this”，都必须这样做。在任何匿名函数内部。例如，如果你有一个类:

method: function() {
    button.addEvent('click', function(e) {
        new Request({
            onComplete: function(res) {
                this.process_result(res);
            }
        }).send();
    });
},
process_results: function(res) {...}

你必须一直向下绑定(bind):

method: function() {
    button.addEvent('click', function(e) {
        new Request({
            onComplete: function(res) {
                this.process_result(res);
            }.bind(this)
        }).send();
    }.bind(this));
},
process_results: function(res) {...}

注意事件函数和 onComplete 函数上的新 bind()。这似乎是一个烦人的额外步骤，但如果不这样做，您将拥有免费的范围。 Mootools 使获取类范围并将其附加到匿名函数变得非常容易。