在HTML页面中定义全局变量，核心在于理解浏览器脚本执行时的全局作用域。所谓全局变量，是指那些在任意脚本位置都能访问、且生命周期伴随页面存在的变量。很多初学者以为只要在script标签里写个变量就是全局的，其实不同声明方式在底层行为上有明显区别。
一、常见的全局变量声明方式
最传统的方式是在script标签的顶层使用var关键字。由于浏览器会把顶层的var声明自动绑定到window对象，因此这种变量真正成为了跨脚本共享的全局变量。例如下面这段代码，在页面任意后续脚本中都能通过window.userName或直接userName访问。
<script> var userName = '张三'; console.log(window.userName); // 输出 张三 </script> <script> console.log(userName); // 输出 张三，可跨script访问 </script>
如果使用let或const在顶层声明，变量虽然处于全局作用域，但并不会成为window的属性。这意味着它在语法上是全局可访问的，却无法通过window对象枚举或删除。这种方式适合需要避免污染window的场景，但如果其他第三方脚本依赖window上的字段，就可能出问题。
<script> let appVersion = '1.0'; const MAX_COUNT = 100; </script> <script> console.log(appVersion); // 输出 1.0 console.log(window.appVersion); // 输出 undefined </script>
二、显式挂载到window对象
为了明确表达这是一个全局共享状态，推荐显式赋值给window。这样无论使用什么模块化方案或严格模式，意图都清晰可读，也方便在控制台调试时直接输入window.x查看。
<script>
window.globalConfig = {
apiBase: 'https://ipipp.com/api',
timeout: 5000
};
</script>
这种写法在老旧系统或嵌入式HTML页面里非常实用。比如一个后台管理系统的多个独立script块都需要读取同一个接口地址，就可以统一挂在window.globalConfig里。缺点是如果不同脚本都往window上挂同名属性，后加载的会覆盖前面的，因此命名应当加上项目前缀。
三、利用命名空间减少冲突
当页面引入多个库或业务脚本时，随意声明全局变量极易造成命名污染。更稳妥的做法是建立一个全局命名空间对象，把所有业务全局状态收拢进去。
<script>
window.MyApp = window.MyApp || {};
MyApp.user = { id: 1, name: '李四' };
MyApp.settings = { theme: 'dark' };
</script>
上面的代码先判断window.MyApp是否存在，不存在则初始化为空对象，这种写法在多个script先后执行时不会相互覆盖。此后所有页面级变量都通过MyApp.xxx访问，既保留了全局可达性，又降低了冲突概率。相比直接写十几个var变量，这种结构在后期维护时更容易定位数据来源。
四、在HTML内联事件中访问全局变量
HTML标签的内联事件处理器（如onclick）执行时，作用域链顶部也是window，因此全局变量可以直接被内联属性调用。不过要注意，内联事件里写的代码字符串会作为函数体解析，所以变量名必须是window上能取到的。
<script> window.siteName = '示例站'; </script> <button onclick="alert(siteName)">显示站点名</button>
虽然内联事件能直接用全局变量，但现代开发更推荐用addEventListener绑定，避免HTML和JS耦合。如果一定要用内联方式，请务必保证变量显式挂在window上，否则使用let声明的顶层变量在内联属性中将无法被识别。
五、全局变量的注意事项
全局变量常驻内存，直到页面关闭才会释放。若页面单页运行数小时且不断往全局对象塞数据，可能引发内存占用偏高。另外，严格模式（'use strict'）并不会阻止顶层var成为全局，但会禁止意外创建未声明变量，例如直接写x=1而不用var或let，在严格模式下会报错。
| 声明方式 | 是否挂到window | 跨script访问 | 严格模式风险 |
|---|---|---|---|
| var a=1（顶层） | 是 | 可以 | 无 |
| let b=2（顶层） | 否 | 可以 | 无 |
| 直接 x=1 | 是 | 可以 | 报错 |
| window.y=1 | 是 | 可以 | 无 |
总结来看，在HTML页面写全局变量并不复杂，关键是选对声明形式。如果是简单演示页，直接用var或window.x都可以；若是长期维护的项目，请使用命名空间对象收敛全局状态，并尽量控制全局变量的数量与体积。
JavaScriptglobal_variableHTML修改时间：2026-08-01 20:57:26