Javascript單例函數不起作用

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，我沒有絲毫的線索爲什麼。它的範圍是什麼？這是保護的東西嗎？它擊敗了我！

編輯：我有jQuery導入和工作。如果我取出if塊，遊戲運行良好。

謝謝！

Answer 1

問題在於你的活動超出範圍，this在你的活動中指的是文檔而非你的對象。

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打響了函數內部可以通過在局部變量that緩存引用您的對象解決這個問題來自​​事件不引用相同的this內部TypingTest，但實際上事件被觸發的目標（在這種情況下它是document）。爲了訪問TypingTest中的_playing變量，您必須創建一個本地變量self，以便您可以使用從​​激發的功能來訪問它。

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); 
     } 
    }); 
}