为何未声明的JavaScript变量（对应HTML元素ID）会自动存在？

这是浏览器的自动全局变量注入机制：浏览器会自动将页面中带有id属性的DOM元素，注册为全局window对象的属性，属性名完全对应元素的id值。

举个例子，页面里如果有<div id="footer"></div>，浏览器后台会自动执行类似window.footer = document.getElementById('footer');的逻辑，所以你在控制台或全局作用域里直接调用footer，本质是在访问window.footer。

这种机制是早期浏览器为了简化DOM元素获取流程引入的，但确实会给调试添乱——比如你不小心拼错变量名，刚好和某个DOM元素的id重合，就会误以为变量已声明，难以排查真正的未定义问题。

如果要规避这个问题，可以试试这些方法：

• 严格用let/const声明变量，不要依赖浏览器的自动注入
• 调试时用typeof footer === 'undefined'判断变量是否真的被声明（直接访问的话，自动注入的变量会让判断失效）
• 在代码开头添加'use strict';启用严格模式，严格模式下不会自动注入这类全局变量，访问未声明变量会直接抛出错误，方便快速定位问题。

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