JavaScript事件函数中全局与局部变量冲突问题解析

问题核心原因 #

你的代码里出现了变量遮蔽（Variable Shadowing），加上执行顺序的细节，导致DOM更新完全没作用到目标元素上：

• 全局作用域里的count是通过querySelector获取的.counterDOM元素。
• 点击事件的回调函数内部，你用const count = "String"声明了同名的局部变量，这会直接遮蔽全局的count——在这个回调函数的作用域里，所有对count的引用都会指向这个字符串变量，而非全局的DOM元素。

调用栈与执行上下文的运行机制 #

当点击触发回调函数时，JavaScript引擎会为这个函数创建一个新的执行上下文，并将其压入调用栈：

1. 执行上下文创建时，会先处理函数内部的变量声明，把局部的count（字符串"String"）加入当前上下文的变量环境。
2. 当执行count.innerText = count这行代码时，引擎会先在当前执行上下文的作用域里查找count，找到的是局部的字符串变量，所以：
   • 左边的count.innerText：试图给字符串类型添加innerText属性（字符串是基本类型，引擎会临时包装成对象，但这个操作不会有任何持久效果，更不会关联到DOM元素）。
   • 右边的count就是字符串"String"，赋值操作只是给临时的字符串对象加了个属性，完全和全局的DOM元素无关。
3. 调试时看到调用栈里的count是String类型，就是因为当前执行上下文的作用域里优先使用的是局部变量。

为什么改局部变量名就正常 #

如果你把局部变量改成别的名字（比如newCount），回调函数里的count就会沿着作用域链往上找，找到全局作用域里的DOM元素，此时执行count.innerText = newCount，就能正确把DOM元素的内容更新为字符串"String"。

修正后的代码示例 #

<div><h1>Hello World !</h1></div>
<button class="event-button">Click me</button>
<div class="counter">count:0</div>
<script>
  const button = document.querySelector(".event-button");
  const count = document.querySelector(".counter");
  button.addEventListener("click", function () {
    const newCount = "String";
    count.innerText = newCount;
  });
</script>

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