为什么我的 HTML 页面会不停地刷新？
html 网页不断刷新之谜
在前端开发中，编写了一段 HTML 代码，打开后却发现网页会不停地刷新。这段代码如下：
<!DOCTYPE html> <html> <head> </head> <body> <script> var location = window.location; </script> </body> </html>
注释掉 var location = window.location; 这行代码后，页面就不会再刷新了。这究竟是怎么回事呢？
问题根源：隐式挂载
在 JavaScript 中，最顶层的 var 变量会被隐式挂载到 globalThis 对象上，而对于浏览器来说，globalThis 就是 window 对象。因此，上面代码中的 location 变量实际上等价于 window.location。
当给 window.location 重新赋值时，浏览器会立即加载新的位置。然而，在这个例子中，新的位置与旧位置相同，导致页面不断刷新。
解决方案
要解决这个问题，有三种方法：
- 更换声明方式：使用 let 或 const 声明变量，这样就不会被挂载到 globalThis 上。
const location = window.location;
- IIFE 包裹：使用立即执行函数表达式（IIFE）将变量声明包裹起来，这样就不会直接声明在最顶层。
;(function () {
var location = window.location;
})();- 避免使用全局对象：最好不要使用浏览器的内置全局对象（如 location）作为变量名。