为何通过jQuery html()插入的脚本函数跨脚本可用，const常量却未定义

1. jQuery .html()方法的脚本执行逻辑 #

调用$().html()插入包含<script>标签的HTML内容时，jQuery不会直接让浏览器统一解析完整DOM内容，而是会单独提取所有<script>标签的代码，通过内部的globalEval方法逐个独立执行，执行后还会移除DOM中的script标签避免重复执行。

2. 不同全局声明的绑定规则差异 #

在浏览器全局作用域下，不同声明方式的绑定逻辑有本质区别：

• var声明的全局变量、function关键字声明的全局函数，都会自动绑定到全局对象window上，所有脚本都可以通过window访问到对应值
• const/let声明的全局变量，不会绑定到window对象，仅存在于当前脚本执行的顶层词法环境中

3. 跨脚本访问失败的核心原因 #

jQuery对每个脚本块独立执行的逻辑，导致每个脚本的顶层词法环境是隔离的：

• 前一个脚本中const声明的常量只存在于该脚本的词法环境中，不会挂到window，后续独立执行的脚本无法访问到该环境的变量，所以会提示未定义
• 静态HTML页面中的所有脚本块是在同一个全局解析上下文中执行，所有const/let的顶层声明都在同一个词法环境中，因此可以跨脚本正常访问

• 需要跨脚本共享的常量，改用var声明，或者手动挂载到window对象：window.someConst = 'hello'
• 调整后端返回的HTML结构，把相关的声明和使用逻辑放在同一个<script>标签内
• 替换html()插入逻辑，改用原生innerHTML插入后，统一提取所有script代码在同一个上下文中执行

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