MooTools 在方法和内部函数中绑定/保留类范围

Question

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

我认为这是由于我的范围所致，并且我必须以某种方式将 addButton 函数绑定回全局“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'));
    }
});    

Answer 2

您遇到此问题是因为当执行 click 处理程序时，this 代表的是 anchor 元素对象，而不是您的 myClass.

将 addButton 更改为：

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

此处 是正在运行的例子。切换到代码视图以查看源代码。

Answer 3

处理这个问题的推荐方法（在许多 mootools 中有更多插件）如下：

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

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

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

您可以看到它与 Adam Rackis 解决方案非常相似，但您不需要使用函数调用来包装您的类。

恕我直言，它使代码变得更加干净/可维护/mooish！

希望这有帮助。

Answer 4

天哪，绑定怎么样？这样做 var self = 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: '#',
        events: {
            click: function(){
                this.sayHi();

                // this will stop event propagation
                return false;
            }.bind(this)
        }
    }).inject($('myDiv'));
}
});  

你可以在这里查看