为何同名JS变量无需选择器即可转为对应ID的div对象？

这是浏览器的全局DOM自动挂载机制导致的：

• 页面加载完成后，浏览器会自动遍历所有带id属性的DOM元素，在全局对象（浏览器环境下就是window）上创建一个与ID同名的属性，属性值就是对应的DOM元素对象。
• 如果你在类里定义变量时，没有用let/const/var声明，也没有绑定到类实例（比如没写this.xxx），这个变量会泄漏到全局作用域。当变量名和DOM元素的ID完全一致时，就会被浏览器自动生成的全局DOM属性覆盖，最终指向对应的div元素对象。
• 哪怕你原本给变量赋了其他值，只要没正确限制作用域，都会被这个全局映射替换掉，所以打印数组时看到的是div对象。

举个直观的例子：

<div id="userInfo"></div>
<script>
class DemoClass {
  init() {
    // 没有声明，变量泄漏到全局
    userInfo = 'test content';
    console.log(userInfo); // 输出的是<div id="userInfo"></div>，而非'test content'
  }
}
new DemoClass().init();
</script>

要避免这个问题，只要确保变量的作用域正确：

• 用const/let在类方法的局部作用域声明变量
• 或者将变量绑定到类实例，比如this.userInfo = 'test content'

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