JavaScript：为何函数外的const变量可被函数访问？移出genel后代码失效原因

JavaScript采用词法作用域机制，核心规则是：函数内部的代码，天然可以读取外层作用域中定义的变量。
你将genselector这个字符串常量定义在handler函数外部时，它处于外层的全局/模块作用域中，handler作为内部声明的函数，完全具备访问这个变量的权限，这一行为完全符合JS的作用域设计逻辑，和你的认知不存在冲突。

这个问题和作用域无关，本质是脚本执行与DOM渲染的时序错位：

• 当你把const genel = document.querySelector(genselector)这行代码移到handler外部时，这行代码会在脚本刚被浏览器加载、立即解析的节点运行。如果此时浏览器还没有完成页面DOM的解析，你要查找的目标文本元素根本还没被挂载到文档中，document.querySelector()的返回值不会是DOM元素，而是null。
• 后续3秒后handler函数被定时器触发执行时，代码尝试读取genel.style.color，本质是在尝试读取null对象的属性，直接触发运行时报错，整个逻辑自然无法生效。
• 对比你把genel定义在handler内部的场景：因为setInterval的回调最早也要3秒之后才会第一次执行，此时浏览器早就完成了全部DOM的渲染，每次执行回调时都能成功拿到真实存在的目标元素，代码自然可以正常运行。
• 你贴的双变量外移的示例代码里还有一处笔误：handler内部写了const specel = document.querySelector(specselector);，其中specselector是未定义的变量，这行本身也会触发未定义变量的报错，但即使删掉这行冗余代码，只要genel的获取时机早于DOM渲染完成，代码依然会失效。

补充说明：如果希望将DOM元素引用移到外部，减少重复查询带来的性能损耗，只需要保证元素获取的执行时机在DOM完全加载完成之后即可——比如把JS脚本放在页面</body>标签的前面，或者用DOMContentLoaded事件包裹外层的DOM查询逻辑，genel就不会拿到null值，代码也可以正常运行。

内容的提问来源于stack exchange，提问作者Maxwell Ledermann