JavaScript合并模块后函数无法访问数组的问题及合并方法咨询

你遇到的Uncaught ReferenceError: array is not defined错误，本质是箭头函数的词法作用域特性导致的：module2里的箭头函数在定义时，其作用域中并没有array变量，即使后续把函数合并到module1，函数依然会去它定义时的作用域查找array，自然找不到。

下面是几种可行的模块合并方案，同时解决作用域问题：

方案一：修改函数为普通函数，利用this指向调用对象 #

把module2中的箭头函数改为普通函数，这样调用时this会指向调用它的module1对象，从而直接访问module1.array：

// 包含数组的第一个模块
let module1 = {};
module1.array = [10, 20, 30];

// 包含函数的第二个模块（修改为普通函数）
var module2 = {};
module2.fct1 = function() { return this.array[0]; };
module2.fct2 = function() { return this.array[1]; };
module2.fct3 = function() { return this.array[2]; };

// 合并模块
module1.fct1 = module2.fct1;
module1.fct2 = module2.fct2;
module1.fct3 = module2.fct3;

// 调用测试
console.log(module1.fct1()); // 输出10

方案二：合并时包装函数，明确引用目标模块的数组 #

如果无法修改module2的代码，可以在合并时给函数套一层包装，让它直接引用module1的array：

// 原模块代码不变
let module1 = {};
module1.array = [10, 20, 30];

var module2 = {};
module2.fct1 = () => { return array[0]; };
module2.fct2 = () => { return array[1]; };
module2.fct3 = () => { return array[2]; };

// 合并时包装函数
module1.fct1 = () => module1.array[0];
module1.fct2 = () => module1.array[1];
module1.fct3 = () => module1.array[2];

// 调用测试
console.log(module1.fct1()); // 输出10

方案三：使用ES6模块规范（现代项目推荐） #

如果你的项目支持ES6模块，可以通过import/export让module2直接引用module1的数组，再合并导出：

// module1.js
export const array = [10, 20, 30];

// module2.js
import { array } from './module1.js';
export const fct1 = () => array[0];
export const fct2 = () => array[1];
export const fct3 = () => array[2];

// 主文件合并模块
import * as module1 from './module1.js';
import * as module2 from './module2.js';

const mergedModule = { ...module1, ...module2 };

// 调用测试
console.log(mergedModule.fct1()); // 输出10

以上方案都能实现模块合并，同时让函数正确访问到数组，合并后的模块可以直接传递给其他函数使用。

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