为何同一文档加载的独立jQuery文件无法协同工作？附报错示例

算力阿峰

2026-5-6

跨脚本访问jQuery回调内的常量出现ReferenceError，如何解决？

我遇到了一个变量作用域的问题，场景是这样的：

我有三个文件：

index.htm
script1.js
script2.js

index.htm 代码：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="jquery-3.4.1.min.js"></script> 
<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script> 
</head> 
<body> Hello, world! </body> 
</html>

script1.js 代码：

$(function() { 
  const THE_TEXT = 'This is THE_TEXT'; 
});

script2.js 代码：

$(function() { 
  function log_THE_TEXT() { 
    console.log(THE_TEXT); 
  } 
  log_THE_TEXT(); 
});

我原本期望页面加载后控制台输出"This is THE_TEXT"，但实际抛出了错误：

ReferenceError: THE_TEXT is not defined script2.js:6:3
jQuery.Deferred exception: THE_TEXT is not defined log_THE_TEXT@ http://example.com/js-test/script2.js:6:3

如果我在script2.js里直接定义这个常量就能正常运行，想请教下这个问题的原因是什么？有没有可行的解决方法？

问题原因

核心问题是变量作用域的限制：
你在script1.js里的const THE_TEXT是定义在jQuery的$(function() { ... })回调函数内部的，这个回调是一个独立的函数作用域。在JavaScript中，函数内部定义的变量（包括const/let/var）只能在该函数内部以及嵌套的子作用域中访问，外部作用域（包括script2.js里的另一个jQuery回调）完全无法直接访问到这个变量。

简单说，这两个$(function() { ... })是完全隔离的函数作用域，它们之间没有共享的变量上下文，所以script2.js自然找不到THE_TEXT。

解决方法

这里提供几种常见的解决方案，你可以根据项目情况选择：

1. 将变量提升到全局作用域

把常量定义在jQuery回调的外部，这样所有脚本都能访问到它：
修改script1.js：

// 定义在全局作用域
const THE_TEXT = 'This is THE_TEXT';

$(function() { 
  // 这里依然可以正常使用THE_TEXT
});

如果不想直接污染全局作用域，也可以挂载到window对象上（本质还是全局，但更明确）：

$(function() { 
  window.THE_TEXT = 'This is THE_TEXT'; 
});

然后在script2.js里访问window.THE_TEXT即可。

2. 使用ES模块（推荐现代项目）

如果你的项目支持ES模块（给script标签添加type="module"即可开启），可以通过导出/导入共享变量：
修改script1.js为模块：

export const THE_TEXT = 'This is THE_TEXT';

$(function() { 
  // ...
});

修改index.htm的script标签：

<script type="module" src="script1.js"></script>
<script type="module" src="script2.js"></script>

然后在script2.js里导入：

import { THE_TEXT } from './script1.js';

$(function() { 
  function log_THE_TEXT() { 
    console.log(THE_TEXT); 
  } 
  log_THE_TEXT(); 
});

这种方式不会污染全局作用域，是更规范的模块共享方式。

3. 合并相关脚本的作用域

如果两个脚本的逻辑紧密相关，可以把它们的代码放到同一个jQuery回调里，或者用一个共享的外层作用域包裹：
比如创建一个立即执行函数表达式（IIFE），把两个脚本的内容都放进去：

// 可以单独创建一个共享作用域文件，或者合并原有脚本
(function() {
  const THE_TEXT = 'This is THE_TEXT';

  // script1的逻辑
  $(function() { 
    // ...
  });

  // script2的逻辑
  $(function() { 
    function log_THE_TEXT() { 
      console.log(THE_TEXT); 
    } 
    log_THE_TEXT(); 
  });
})();

这样两个回调都能访问到同一个作用域里的THE_TEXT，同时也不会污染全局。

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