JavaScript能否像Java那样跨.js文件调用其他文件内的变量？

JavaScript默认不会像Java一样自动将同目录文件映射为可直接访问的同名对象，要实现wordBank.wordCount这种「文件名作为命名空间访问内部变量」的效果，可根据你实际的运行环境选择对应方案：

浏览器原生无构建环境 #

浏览器环境下每个JS文件的顶层作用域默认指向全局window对象，不会自动按文件名做命名空间隔离，直接声明顶层变量容易出现全局污染。要实现目标效果可以手动给文件绑定同名命名空间：

• 编写wordBank.js时，先声明和文件名一致的全局对象，所有需要跨文件访问的变量都挂载到这个对象上

// wordBank.js
const wordBank = {
  wordCount: 0
}

• 在HTML中先引入wordBank.js，再引入依赖它的业务脚本，后续就可以直接通过文件名对象访问修改变量

// 其他业务脚本
wordBank.wordCount = 1;
console.log(wordBank.wordCount); // 输出1

这种方案仅适合小型静态页面项目，文件多了容易出现全局命名冲突，不推荐中大型项目使用。

Node.js CommonJS环境 #

Node.js默认采用CommonJS模块规范，每个文件是独立的作用域，内部变量不会泄露到全局，通过导出、引入模块的方式即可实现目标效果：

• 在wordBank.js中通过module.exports暴露需要跨文件访问的变量

// wordBank.js
module.exports = {
  wordCount: 0
}

• 同目录其他文件引入时，用和文件名同名的变量接收导出的模块对象，即可实现和Java一致的调用写法

// 同目录其他JS文件
const wordBank = require('./wordBank');
wordBank.wordCount = 1;
console.log(wordBank.wordCount); // 输出1

注意：CommonJS导出基础类型值时是值拷贝，直接导出基础类型变量的话跨文件修改不会同步，把变量作为导出对象的属性挂载即可实现修改全局同步。

ES Module 环境（浏览器原生ESM/现代前端构建项目） #

这是目前最通用的实现方案，不管是原生支持ES Module的浏览器，还是用Vite、Webpack等构建工具搭建的前端项目、支持ESM的高版本Node.js都可以用，写法最简洁，也不需要手动处理命名空间：

• 在wordBank.js中用ES模块语法导出需要对外暴露的变量

// wordBank.js
export let wordCount = 0;

• 其他文件引入时，通过import * as 文件名的方式将整个模块作为对象导入，直接就能用文件名.变量名的形式读写变量

// 同目录其他JS文件
import * as wordBank from './wordBank.js';
wordBank.wordCount = 1;
console.log(wordBank.wordCount); // 输出1

这种方案天然具备模块作用域隔离，不会污染全局，导入方式完全匹配你想要的Java式调用体验，是优先推荐的实现方式。

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