Классы MooTools и `this` в отложенных вызовах функций

Question

У меня проблемы с использованием ключевого слова this в классе MooTools (1.3).Конструктор присваивает значение атрибуту, и последующий метод запуска отображает это значение во всплывающем окне 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 в замыкании.

Более простой способ сделать это - использовать параметр bind в вызовеdelay.Параметр 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 будет ссылатьсяк глобальному объекту (~ окно ).

Решение состоит в том, чтобы явно передать объект вызова 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);