React中全局作用域与模块作用域的差异及相关疑问

核心前提：作用域是JS本身的概念，无需绑定React理解 #

作用域规则是JavaScript语言本身定义的，React只是运行在ES模块化环境中的框架，差异本质是「非模块化JS环境」和「ES模块环境」的区别，和React本身无关。

你的代码差异解析 #

MDN示例的环境：非模块化全局环境 #

MDN的代码运行在非模块模式下（比如直接在HTML里写<script>标签，没有type="module"属性），此时顶层的const x属于全局作用域，整个页面的JS代码都能访问。

const x = "declared outside function"; // x is in global scope

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x);

React示例的环境：ES模块环境 #

React项目（不管用Create React App还是Vite搭建）默认采用ES模块规范，每个.js/.jsx文件都是独立的模块，拥有自己的模块作用域：

• 模块内顶层声明的变量（不管用var/let/const），默认只在当前模块内可见，不会成为全局变量
• 其他模块必须通过import才能访问当前模块导出的内容

所以你的示例中：

// a.js
var x = "declared outside function"; // 属于a.js的模块作用域，不是全局

export function exampleFunction() {
  console.log("Inside function");
  console.log(x); // 能访问x，因为函数在a.js模块内定义，作用域链包含模块作用域
}

// b.js
import {exampleFunction} from './a.js'
console.log(x); // 报错：x未定义，因为x只在a.js模块内可见

你的问题逐一解答 #

1. React中的每个.js文件都是模块？ #

是的。现代React项目默认遵循ES模块规范，每个文件都是独立模块，拥有自己的隔离作用域。

2. 场景中的x属于全局作用域还是a.js的模块作用域？ #

属于a.js的模块作用域。ES模块中，顶层的var声明和let/const一样，不会挂载到全局window对象，仅在当前模块内有效。这和非模块环境下var会成为全局变量的规则完全不同。

3. 被导出的exampleFunction是否仍属于模块作用域？ #

是的。exampleFunction虽然被导出，但它的作用域链依然保留了定义时的a.js模块作用域，所以它能访问a.js内的x，但其他模块导入它后，无法通过它访问a.js内未导出的变量。

4. 声明真正全局作用域变量的实践方法 #

注意：全局变量容易导致命名冲突，除非必要尽量避免使用。常见方法有：

• 挂载到window对象：在任意模块中直接赋值给window，其他地方通过window.xxx访问

  // 某模块内
  window.globalX = "全局变量";
  
  // 其他模块或全局代码中
  console.log(window.globalX);
  

• 非模块script标签声明：在HTML中添加不带type="module"的<script>标签，里面的顶层变量会成为全局变量

  <script>
    var globalY = "全局变量";
  </script>
  

• 关于.env文件：这不是真正的全局变量，是编译时注入的环境变量，只能通过特定语法访问（比如Create React App用process.env.REACT_APP_XXX，Vite用import.meta.env.VITE_XXX），不会挂载到全局作用域，也不能在运行时修改。

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