javascript - MooTools 在方法和内部函数中绑定(bind)/保持类范围

Question

我正在尝试使用 Mootools 将按钮动态添加到页面。一切正常，除了 addButton 函数中的 addEvent。我收到一条错误消息，指出“对象 javascript:void(0) 的属性‘sayHi’；不是函数”。

我假设这是由于我的范围，我必须以某种方式将 addButton 函数绑定(bind)回全局“this”？有人可以解释我做错了什么吗？谢谢!

var myClass = new Class({
    initialize: function(){
        this.sayHi();
    },

    sayHi: function(){
        alert('Hello World!');
    },

    addButton: function(){
        this.hiButton = new Element('a', {
            id: 'sayhi',
            html: 'Hi!',
            href: 'javascript:void(0);',
            events: {
                click: function(){
                    this.sayHi();
                }
            }
        }).inject($('myDiv'));
    }
});    

Answer 1

问题是在您的点击处理程序中，this 值不再是原始对象，而是被点击的按钮。

可能有一种特定于 MooTools 的方法来解决这个问题，但是将这个对象创建包装在一个函数中将是解决这个问题的一种简单、原生的方法:

function getMyClass(){
   var self = new Class({
       initialize: function(){
           this.sayHi();
       },

       sayHi: function(){
           alert('Hello World!');
       },

       addButton: function(){
           this.hiButton = new Element('a', {
               id: 'sayhi',
               html: 'Hi!',
               href: 'javascript:void(0);',
               events: {
                   click: function(){
                       self.sayHi();
                   }
               }
          }).inject($('myDiv'));
       }
   });

   return self;
}    

然后

var myClass = getMyClass();

编辑

虽然以上是 JavaScript 中相当标准的惯用语，但我听说它不能很好地与 MooTools 配合使用。如果是这样的话，我会这样做(正如另一个答案已经提到的那样):

var myClass = new Class({
    initialize: function(){
        this.sayHi();
    },

    sayHi: function(){
        alert('Hello World!');
    },

    addButton: function(){
        var self;
        this.hiButton = new Element('a', {
            id: 'sayhi',
            html: 'Hi!',
            href: 'javascript:void(0);',
            events: {
                click: function(){
                    self.sayHi();
                }
            }
        }).inject($('myDiv'));
    }
});