javascript中函数声明本身不直接实现模块间共享,必须配合export导出(默认或命名)和import导入才能跨模块使用;函数需在顶层作用域导出,不可在条件块内;挂载全局对象违背模块化原则,应避免。

JavaScript 中函数声明本身不直接实现模块间函数共享,它只是定义一个可调用的代码块;真正支撑跨模块共享的是 模块系统(import/export)与 作用域控制 的配合。函数声明的位置、导出方式、以及是否被正确导入,共同决定了它能否被其他模块使用。
函数声明需配合 export 才能跨模块使用
仅声明函数,如 function sayHello() { },该函数只在当前文件(模块)内有效。要供其他模块调用,必须显式导出:
- 默认导出:
export default function sayHello() { }→ 其他模块用import sayHello from './utils.js'接收 - 命名导出:
export function sayHello() { }→ 其他模块用import { sayHello } from './utils.js'解构导入 - 也可先声明再导出:
function sayHello() { } export { sayHello }
函数声明提升不影响模块导出时机
虽然函数声明存在提升(hoisting),可在定义前调用,但 模块的导入/导出是静态解析的,发生在代码执行前。这意味着:
- 即使函数在
export语句之后声明,只要在同一模块顶层,仍可被正常导出 - 但不能在条件语句或嵌套块中动态
export,因为 export 必须位于模块顶层作用域 - 常见错误:在 if 块里写
export function foo() {}→ 语法错误
避免用全局函数替代模块导出
有人试图绕过模块系统,把函数挂到 window 或全局对象上(如 window.sayHello = function(){};),这看似实现了“共享”,实则带来严重问题:
- 污染全局命名空间,易引发冲突
- 破坏模块封装性,无法做 tree-shaking(自动剔除未使用代码)
- 不利于类型推导、IDE 自动补全和单元测试
- ES 模块环境下,
window不一定可用(如 Node.js 或某些构建工具)
推荐组合:函数声明 + ES 模块 + 明确导出
清晰、可维护、符合现代实践的方式是:
- 在独立工具模块(如
math.js)中声明纯函数:export function add(a, b) { return a + b; } - 在业务模块中按需导入:
import { add } from './math.js'; console.log(add(2, 3)); - 复杂逻辑可封装为具名函数并统一导出对象:
const utils = { add, multiply, format }; export default utils;
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











