Question

我在mootools中实现类时遇到问题，因为当我在element.addEvent发送方法时我不能使用'this'。

说我有这个mootools课程：

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor);

            });
    },

});

此代码将在addEvent方法调用中抛出异常，因为this突然出现在另一个上下文中。有没有其他方法来获取对象的highlightColor（或mootools类可能具有的任何其他成员）？

Answer 1

每次使用函数时都需要将 this 引用绑定到函数上（addEvents或each）

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor);

            }.bind(this));
    }
});

对函数doStuff上的最后一个昏迷很关心... firefox就像一个母亲它会原谅你但iexplorer是一个bmf它会抛出一个错误而不会告诉你为什么

Answer 2

“MooTools方式”是使用bindWithEvent函数：

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(event){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor); // <- `this` refers to the 
            }.bindWithEvent(this));                  //    outer `this` value
    },
    //...
});

该方法允许您保留函数的this值，并在必要时传递其他参数。

绑定函数的第一个参数将引用触发事件的Event对象。

Answer 3

@CMS走在正确的轨道上，但bindWithEvent现已弃用，documentation建议使用此代码：

myElement.addEvent('click', function(e){
    myFunction.call(bind, e);
});

如果你想将事件绑定元素传递给你的一个类方法，你可以这样做：

var self = this; // 'this' is class reference
elements.addEvent('click', function(e){
    self.myClassMethod(this, e); // now 'this' is clicked element
});

现在你已经将正确的元素传递给你的方法并准备好操作了。

如何在mootools类的函数中调用它

3 个答案: