javascript - 为什么这个函数尽管在声明之前就被调用了，但仍会快速运行？

Question

我需要一些澄清。

我知道函数声明在创建阶段被提升到脚本的顶部，但在下面的示例中，我正在创建函数表达式。

我不明白为什么当我在声明之前调用提交事件监听器时会调用函数“CheckAnswer”？

我的理解是该变量将被创建为未定义，当我在 Guess Player 函数内调用 checkAnswer 时，它会抛出错误，因为我直到文件末尾才声明。

显然我错了，所以这里的一些帮助会很棒:)

(function() {
    const playerInput = document.getElementById('player-input');

    // Display player
    const displayPlayer = () => {
        const random = players[Math.floor(Math.random() * players.length)];
    }

    // Player guess
    const playerGuess = (e) => {
        e.preventDefault();
        const playerGuess = playerInput.querySelector('input').value;

        checkAnswer(playerGuess);
    }

    playerInput.addEventListener('submit', playerGuess);

    // Check answer
    const checkAnswer = (playerGuess) => {
        console.log(playerGuess);
    }
})();

Answer 1

尝试实际运行 playerGuess(e)(其中 e 是使用 new Event(...) 创建的事件)。

您将看到一切都按您的预期运行并引发错误。

由于 JS 函数是一等公民，因此您可以(并在代码中执行)使用它们执行多个操作(调用)。

所以，当你写:

playerInput.addEventListener('submit', playerGuess);

您不会调用playerGuess，您只是通过引用将其作为回调传递给事件监听器，因此，它将在需要时触发它。

因此，直到用户在您设置事件监听器和声明 checkAnswer 之间单击“提交”之前，都不会引发错误。

尽管如此，读起来还是很困惑，而且为了节省其他人一两个小时的谷歌搜索时间而进行重构肯定会更好。