关于JavaScript全局作用域特性与DOM元素获取时机的疑问

一、全局变量colourCode在函数多次调用间保留值的原因 #

在JavaScript中，全局作用域声明的变量（比如示例里的let colourCode = 0）会被挂载到全局对象（浏览器环境下为window），其生命周期与整个页面的生命周期一致。每次调用colourShift函数时，都是直接修改这个全局变量的取值，因此它的状态会在函数的多次调用之间持续保留。

你提到这和C语言的static行为类似，但二者本质不同：

• C语言的static变量是函数作用域内的全局生命周期变量，只能在定义它的函数内部访问；
• JS的全局变量是作用域本身就是全局，所有函数都可以访问和修改，状态持久是全局作用域的特性。而JS中的static关键字是用于类的静态属性/方法，和全局变量的逻辑完全无关。

结合你的代码来看：每次点击触发bloonClick，进而调用colourShift时，colourCode会基于上一次的取值加1，超出范围后重置。因为它是全局变量，每次调用都不会重新初始化，自然能保留状态。

二、将const bloon = document.getElementById("balloon")移到全局后失效的原因 #

核心问题是代码执行时机与DOM渲染顺序不匹配。

如果把DOM查询代码放在全局作用域，它会在页面加载过程中立即执行。此时如果浏览器还没完成DOM渲染（也就是<div id="balloon">还没被解析成DOM节点），document.getElementById("balloon")会返回null。后续调用bloonClick时，尝试访问null的clientWidth属性会直接抛出错误，导致代码完全无法运行。

而原来的写法是把这行代码放在bloonClick函数内部，只有当用户点击时才会执行——此时页面已经完成DOM渲染，必然能找到目标元素，所以可以正常获取clientWidth并修改样式。

如果想把DOM查询放在全局作用域，有两种解决方式：

• 将代码包裹在DOMContentLoaded事件回调中，确保DOM渲染完成后再执行查询：

  document.addEventListener('DOMContentLoaded', function() {
      const bloon = document.getElementById("balloon");
      // 后续相关逻辑...
  });
  

• 将<script>标签放在HTML的</body>标签之前，这样脚本执行时DOM已经全部加载完毕。

内容的提问来源于stack exchange，提问作者El Nitromante