结论:标签本身不定义作用域,仅作为脚本执行容器;真正创建作用域的是函数、if、for、{}等js语法结构,其中函数形成函数作用域,let/const配合{}形成块级作用域,全局作用域由页面环境提供且多个共享。
作用域">
直接说结论:<script></script> 标签本身不定义区块作用域,真正起作用的是函数、if、for、{} 这些语法结构,而 <script></script> 只是脚本执行的容器——它既不创建作用域,也不嵌套作用域。
为什么 <script></script> 嵌套 function 不等于“区块作用域”
很多人看到 <script></script> 里写 function outer() { function inner() {} },就以为外层 <script></script> 和内层 function 构成了“区块嵌套关系”。其实不是:
-
<script></script>标签只是把 JS 代码加载进当前执行环境,它的边界对 JS 引擎来说没有语义意义 - 真正形成作用域的是
function、if(ES6+ 的let/const)、for、{}等语言结构 - 多个
<script></script>标签之间默认共享全局作用域,除非用 IIFE 或模块包裹
用 function 和 {} 显式划分区块作用域
要定义可复用、隔离的“网页区块作用域”,得靠 JS 本身的嵌套能力,而不是 HTML 标签排列:
- 函数作用域:用
function包裹逻辑,变量自动限制在内部,比如function renderHeader() { const el = document.getElementById('header'); ... } - 块级作用域:ES6+ 中用
let/const+{},例如if (condition) { const apiURL = '/v1/users'; fetch(apiURL); }——apiURL在块外不可访问 - 避免污染全局:不用
var声明,不裸写counter = 0(这会挂到window.counter)
常见错误:误把 <script></script> 当作作用域分隔符
下面这些写法看似“分区”,实际毫无作用域隔离效果:
- 连续多个
<script></script>标签,但都用var声明同名变量 → 全局覆盖,不是隔离 -
<script> function initCart() { ... } </script>和<script> initCart(); </script>分开写 → 仍共享全局,且依赖执行顺序 - 在
<script></script>内写if但用var→var会被提升,块内声明等价于函数顶部声明
真正安全的做法是:每个逻辑区块封装成独立函数或模块,用 let/const + 显式 {} 控制可见性,必要时用 export / import 或 IIFE 隔离。
最容易被忽略的一点:HTML 结构(比如多个 <div id="sidebar">)和 JS 作用域完全无关——你不能靠 DOM 层级推断变量是否可访问。作用域只由 JS 代码的嵌套结构决定,不是由 <code><script></script> 的位置或数量决定。











