为什么这个 const 变量即使在函数外部定义也能在函数中工作[重复]答案

【问题标题】：Why does this const variable work in a function even when defined outside the function [duplicate]为什么这个 const 变量即使在函数外部定义也能在函数中工作[重复]
【发布时间】：2021-04-04 22:57:51
【问题描述】：

我有一些 javascript 代码可以将网页中的文本元素更改为随机颜色。我是新手，但代码确实有效。每三秒，特定元素的文本颜色就会变为一种新的随机颜色。

const handler = function() {
    const genselector = "div.tw-c-text-alt-2.tw-flex > span";
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

如果我将两个 const 变量都移到函数之外，程序将不再工作，这是有道理的，因为变量是在函数外部定义的，它们不是全局变量。

const genselector = "div.tw-c-text-alt-2.tw-flex > span";
const genel = document.querySelector(genselector);

const handler = function() {
    const specel = document.querySelector(specselector);    
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

但是，如果我只将第一个变量移到函数之外，代码仍然可以工作，尽管我认为它不应该这样做。

const genselector = "div.tw-c-text-alt-2.tw-flex > span";

const handler = function() {
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler, 3000);

当 genselector 变量在函数外部定义时，该函数如何访问它，以及由于什么原因导致它工作，为什么当我移出genel 变量时不会发生同样的事情。

【问题讨论】：

很可能该元素在您查询它时不存在。变量范围不是问题。
一般有block scope 和scope 的google。最后在 js 中搜索 Google function hoisting 以获得一般答案。我认为这里的问题是您运行 js 的时间
见What is the scope of variables in JavaScript?。在函数外部定义的变量在函数内部仍然可以访问；这不是您的脚本停止工作的原因。使用browser console (dev tools)（点击F12）并阅读任何错误。是document.querySelector(genselector) === null？你的<script> above 是没有defer 属性且没有DOMContentLoaded 或load 监听器的HTML 吗？见Why does jQuery or a DOM method such as getElementById not find the element?。
同样在你的情况下不起作用，如果你没有在任何地方定义规范选择器，那么该行也会阻止代码运行。

标签： javascript scope constants

【解决方案1】：

因此，如果这（几乎）是您拥有的唯一 JS 代码，那么这是正常行为。为什么您的代码在第二个示例中崩溃是因为如果您不使用事件侦听器，您的代码会在加载 DOM 之前执行。所以基本上你正在尝试对尚未渲染的东西做一个 docuement.queryselector 。在最后一个示例中，您在执行函数时执行查询，这可能是创建所有 HTML 元素的地方，因此查询将找到该元素。

现在额外介绍如何解决这个问题。您可以在文档上设置一个事件侦听器，等待所有 HTML 代码加载完成：

window.addEventListener('load', (event) => {
  <<< Add your code here >>> 
});

然后在使用您的代码的第二个示例时它不会引发错误。

【讨论】：

【解决方案2】：

当网络浏览器执行你的 javascript 时，网页的 DOM 和元素还没有准备好。这意味着document.querySelector(genselector) 找不到元素并且genel 为空。这在场景 1 和 3 中不是问题，因为 3 秒后再次执行 handler 函数。但在场景 2 中，genel 的值仅被分配一次。

【讨论】：