JavaScript 模块加载与执行顺序：从变量未定义错误谈起

原创已于 2025-03-10 09:41:52 修改 · 559 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

JavaScript

于 2025-03-10 09:32:35 首次发布

引言

在开发一个基于 Babylon.js 的 3D 场景时，我们遇到了一个典型的 JavaScript 错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'scene')。
表面看是变量未初始化，但深层次的原因是 JavaScript 模块加载机制与执行顺序的陷阱。本文将通过此案例，深入解析 JavaScript 的执行顺序逻辑。

一、问题复现

错误代码结构

// TunnelPage.js
const scene = new BABYLON.Scene(engine); // 初始化场景
window.gVar = { scene }; // 挂载到全局变量

import { onPickMesh } from "./MouseOperation.js"; // 关键点：此处导入触发模块加载

// MouseOperation.js
const scene = window.gVar.scene; // ❌ 此时 gVar.scene 尚未初始化
scene.onPointerDown = function() { /*...*/ }; // 报错

错误原因

模块加载顺序：import语句总是首先执行，这与import语句的位置无关，当 TunnelPage.js 导入 MouseOperation.js 时，后者会 立即执行。
变量初始化时机：MouseOperation.js 访问 window.gVar.scene 时，TunnelPage.js 中的 scene 尚未创建。

二、JavaScript 模块加载的核心规则

1. 模块是“静态”的

ES6 模块在代码解析阶段确定依赖关系，import 语句会被提升到模块顶部优先执行。
模块代码仅执行一次，且按依赖树顺序执行。

2. 模块执行顺序示例

// ModuleA.js
console.log("ModuleA 执行");
export const valueA = "A";

// ModuleB.js
import { valueA } from "./ModuleA.js";
console.log("ModuleB 执行，valueA =", valueA);

// Main.js
import "./ModuleB.js";
console.log("Main 执行");

输出顺序：

ModuleA 执行 → ModuleB 执行 → Main 执行

3. 变量初始化的陷阱

// ModuleA.js
export let valueA; // 声明未赋值
setTimeout(() => { valueA = 42; }, 1000); // 异步赋值

// ModuleB.js
import { valueA } from "./ModuleA.js";
console.log(valueA); // 输出 undefined

模块顶层的变量初始化是同步的，异步操作无法被外部模块捕获初始状态。

三、问题解决方案

1. 延迟访问全局变量

将依赖全局变量的操作封装成函数，在变量初始化后调用：

// MouseOperation.js
export function initMouseOperations() {
  const scene = window.gVar.scene; // ✅ 运行时确保已初始化
  scene.onPointerDown = function() { /*...*/ };
}

// TunnelPage.js
import { initMouseOperations } from "./MouseOperation.js";
const scene = new BABYLON.Scene(engine);
window.gVar = { scene };
initMouseOperations(); // 显式初始化

2. 依赖注入模式

通过参数传递依赖，避免隐式依赖全局状态：

// MouseOperation.js
export function initMouseOperations(scene) {
  scene.onPointerDown = function() { /*...*/ };
}

// TunnelPage.js
const scene = new BABYLON.Scene(engine);
initMouseOperations(scene);

3. 动态导入（Dynamic Import）

按需异步加载模块，精准控制执行时机：

// TunnelPage.js
const scene = new BABYLON.Scene(engine);
window.gVar = { scene };

import("./MouseOperation.js").then(module => {
  module.initMouseOperations();
});

四、JavaScript 执行顺序的核心原则

1. 事件循环（Event Loop）

同步代码优先执行，包括模块初始化。
异步任务（setTimeout、Promise 等）进入任务队列，等待主线程空闲。

2. 模块生命周期

阶段	行为
解析（Parsing）	确定模块依赖关系
加载（Loading）	下载所有依赖模块（浏览器环境）
执行（Evaluation）	按依赖顺序执行模块顶层代码