JS函数调用未手动定义的blackout变量仍正常运行的原因是什么

核心原因 #

这是浏览器内置的遗留兼容特性：所有带id属性的HTML元素，都会被自动挂载为全局window对象的同名属性，你直接调用blackout本质是访问window.blackout，不需要自己手动定义变量。

具体规则说明 #

1. DOM解析完成后，浏览器会自动执行类似以下的隐式逻辑：

   // 浏览器自动执行，你看不到这段代码
   window.blackout = document.getElementById('blackout')
   

   只要你的页面里存在<div id="blackout"></div>，这个属性就会被自动创建，全局作用域下直接写blackout就可以读取到对应的DOM元素。
2. 浏览器控制台默认运行上下文就是全局window作用域，所以直接输入blackout也能返回正确的DOM节点，和你的实际运行效果一致。

注意事项 #

• 该特性是为了兼容早期的老旧Web代码，不推荐在正式生产环境直接使用：如果手动声明了同名全局变量，会覆盖自动挂载的DOM属性，很容易出现命名冲突，排查难度高。
• 如果页面存在多个相同id的元素（不符合HTML规范但实际可能出现），自动挂载的属性只会返回第一个匹配的元素。
• 只有id属性会触发该自动挂载逻辑，class属性不会。

内容的提问来源于stack exchange，提问作者dr.Ahoss