JS：为什么代码在控制台上的运行与在 .js 文件上的运行方式不同？

Question

我正在学习 JavaScript，我正在关注的书建议测试代码（用于练习和探索概念）最简单的地方是浏览器控制台本身，所以这就是我一直在做的事情。

但是，我的一位专业朋友告诉我改为制作一个 html 页面，将其链接到一个 js 文件，然后将我想要测试的代码放在一个立即调用的函数中。这样我就可以在浏览器上加载和重新加载页面以查看控制台上的输出。

我很困惑为什么相同的简单代码在控制台上直接输入和从文件中加载时会以不同的方式运行或输出。

然后我在我的材料中遇到了这段代码（用于说明循环的闭包）：

for (var i=1; i<=5; i++) {
    setTimeout(function timer(){ 
        console.log(i); 
    }, i*1000 );
}

书上说这段代码应该输出数字 6 五次，但是当我在控制台（谷歌浏览器）上输入它时，输出是一个 5，然后是五个 6s（每秒一个）。

记住我朋友说的话，我听从了他的建议，确实，同样的代码，当从链接到 html 的 js 文件执行时，输出不同，导致数字 6 五个次。

究竟为什么会发生这种情况？发动机有区别吗？编译是否因某种原因而不同？

我不知道这里发生了什么。我的朋友没有时间或知识来解释，而且这本书也从未涉及过这个主题。

Answer 1

您看到的第一个5 不是任何console.log() 调用的结果。

当您在控制台中键入语句时，它会自动打印语句中最后一个表达式的值。在这种情况下，它打印了上次调用 setTimeout() 返回的值，即计时器 ID。

如果你多次执行，你会看到第一个数字每次都增加。