如何在我的主函數中訪問變量

Question

抱歉，這篇長文章，我對 javascript 的水平很一般，尤其是在面向對象編程方面。

過去，我使用 javascript 和 jquery 執行相當簡單的任務，例如勾選復選框或在網頁上提交表單。

今天我想編寫一個小型抽認卡游戲，但我認為這涉及更復雜的編程結構，我目前還沒有掌握這些結構。

基本上，這就是我的游戲應該做的：

• 當用戶點擊“玩游戲”時，游戲開始
• 我們使用 ajax 獲取單詞列表
• 然后將單詞存儲在“loadedWords”數組中
• 當用戶點擊“下一個詞”時，我們會顯示下一個詞

這是我成功做到的：

document.addEventListener('click', function (event) {

    const settings              = {};  
    const myGame                = new Game(settings);

    settings.playGameBtn        = document.querySelector('#playGame'); 

    switch(event.target) {

        case settings.playGameBtn:

            settings.gameDiv = document.createElement('div'); 
            settings.gameDiv.setAttribute("id", "gameDiv"); 
            document.body.appendChild(settings.gameDiv); 

            myGame.startGame(settings);

            break;

        default:

            break;

    }

}, false);


var Game = function(settings) {

    this.startGame=function (settings) {

        loadDoc( initializeWords );
     
    }

    function loadDoc( cFunction ) {

        var xhr;

        xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {

            if ( this.readyState == 4 ) {

                cFunction(this);

            }

        };

        xhr.open("POST", "ajax.php", true);
        xhr.send(null);

    }

    function initializeWords(xhr) {

        var loadedWords = JSON.parse(xhr.responseText);
        
        console.log(loadedWords); // the words are properly loaded here, in the array loadedWords"

        document.addEventListener('click',      mouseEventsListener);

        settings.wordDiv = document.createElement('div'); 
        settings.wordDiv.setAttribute("id", "word"); 
        settings.gameDiv.appendChild(settings.wordDiv); 

        settings.nextWordBtn = document.createElement('button'); 
        settings.nextWordBtn.setAttribute("id", "nextWordButton"); 
        settings.nextWordBtn.innerHTML = "Next Word";
        settings.gameDiv.appendChild(settings.nextWordBtn); 

    } 

    function mouseEventsListener (event){

        switch(event.target) {

            case settings.nextWordBtn:

                console.log(loadedWords); // ERROR! "Uncaught ReferenceError: loadedWords is not defined"

                displayNextWord(loadedWords);

                break;
     
            default:

                break;

        }

    }

    function displayNextWord(loadedWords) {

        settings.wordDiv.innerHTML          = loadedWords[0].word;

    } 

}

事實證明，當我單擊“下一個詞”時，函數 mouseEventsListener（事件）中的數組“loadedWords”為空

如何傳遞“loadedWords”並使其在主函數“Game”中可訪問？

此外，由於我對 javascript 的使用非常平庸，我不確定我的編程結構是否正確編碼，也許您對不同功能的重疊有特別的建議。

感謝您的幫助 ：）

Answer 1

在函數的開頭聲明 this.loadedWords={} 是一個很好的解決方案。