Javascript singleton function not working

Question

Я пытаюсь изучить немного «продвинутого» Javascript, поэтому я решил, что сделаю простую типизирующую игру. К сожалению, я уже застрял на ранней стадии, и я считаю, что это глупая ошибка, когда я совершенно ничего не теряю. Вот мой код:

var TypingTest = new function() { 

    this._playing = false; 

    this.Play = function() { 
     this._playing = true; 
    } 
    this.Stop = function() { 
     this._playing = false; 
    } 

    $(document).keydown(function(e) { 
     if(this._playing) { 
        // Reference point 
      console.log(e); 
     } 
    }); 
} 

Проблема заключается в том, независимо от того, что я создаю экземпляр переменной _playing не, то «точка отсчета» не достигается. this._playing всегда undefined, и у меня нет ни малейшего понятия, почему. Это область? Это защита? Это бьет меня!

EDIT: У меня есть jQuery импортированный и работающий. Если я вынимаю блок if, игра отлично работает.

Спасибо!

Answer 1

Проблема в том, что в вашем мероприятии вы отсутствуете, this в вашем случае относится к документу, а не к вашему объекту. Вы можете исправить это за счет кэширования ссылки на ваш объект в локальной переменной that:

var TypingTest = new function() { 
    ... 
    var that = this; 
    ... 
    $(document).keydown(function(e) { 
     if(that._playing) { 
        // Reference point 
      console.log(e); 
     } 
    }); 
} 

Answer 2

Это проблема с закрытием (подробнее об этом здесь: How do JavaScript closures work?)

Проблема заключается в this внутри функции обожженного из события keydown не ссылается на то же самое this внутри TypingTest, но на самом деле цель, с которой было произведено событие (в данном случае это document). Чтобы получить доступ к переменной _playing от TypingTest, вы должны создать локальную переменную self, чтобы вы могли получить к ней доступ в функции, запущенной с keydown.

var TypingTest = new function() { 
    var self = this; 

    this._playing = false; 

    this.Play = function() { 
     this._playing = true; 
    } 
    this.Stop = function() { 
     this._playing = false; 
    } 

    $(document).keydown(function(e) { 
     if(self._playing) { 
        // Reference point 
      console.log(e); 
     } 
    }); 
}