Question

我在MooTools（1.3）类中使用this关键字时遇到了困难。构造函数为属性赋值，随后运行的方法在alert弹出窗口中显示该值。如果我想延迟运行此方法（使用myfunction.delay(…)），弹出窗口会显示undefined。

var MyClass = new Class({   
    initialize: function() {
        this.x = 13;
    },               
    run: function() {
        alert(this.x);
    }
});
window.addEvent('domready', function() {
    var m = new MyClass();
    m.run();              // ``13''
    m.run.delay(2000);    // ``undefined''
});

在摆弄之后，我设法找到了以下解决方案：

window.addEvent('domready', function() {
    var m = new MyClass();
    (function() { m.run() }).delay(2000);    // ``13''
});

尽管如此，我想了解这里发生了什么，以及为什么简单地调用m.run.delay(…)并不能解决问题。

Answer 1

当我们在函数上调用delay时，该函数将在全局对象的上下文中执行（通常为window）。解决方案是将其包装在另一个函数中并捕获闭包中的对象m。

更简单的方法是在delay的调用中使用bind parameter。 bind参数指定在调用函数时this值应在函数内引用的内容。

m.run.delay(2000, m);

Answer 2

当您以m.run()方式调用函数时，this关键字将引用基础对象m。 Function.prototype.delay可能会使用setTimeout来调用延迟函数。

Function.prototype.delay = function(ms) {
  setTimeout(this, ms);
}

此表单的问题是setTimeout将在没有基础对象引用的情况下调用您的函数，因此this将引用全局对象（〜 window ）。 / p>

解决方案是明确地将调用对象传递给delay。

/**
 * delay - (number) The duration to wait (in milliseconds).
 * bind  - (object, optional) The object that the "this" of the function
 *          will refer to.
 * args  - (mixed, optional) The arguments passed (must be an array if the 
 *          arguments are greater than one).
 */
m.run.delay(2000, m);

MooTools类和`this`在延迟函数调用中

2 个答案: