在前端开发中，我们通常需要在不同的 JavaScript 文件中编写和组织代码。为了提高代码的可重用性和可维护性，我们可能需要在一个文件中编写一些函数，然后在其他文件中调用它们。
那么问题来了，我们如何调用在另一个 JS 文件中编写的函数呢？下面我们一起来探讨这个问题。
使用 import 和 export
在 ES6 中，我们可以使用 import 和 export 语句来导入和导出模块中的函数、类、常量等等。
导出函数
首先，我们在一个 JS 文件中定义一个函数，例如：
// math.js
export function add(a, b) {
return a + b;
}在这个例子中，我们使用 export 关键字将 add() 函数导出，以便其他文件可以访问它。
导入函数
然后，在另一个 JS 文件中，我们可以使用 import 语句来导入 add() 函数，例如：
// index.js
import { add } from './math.js';
console.log(add(1, 2)); // 输出 3在这个例子中，我们使用 import 语句从 math.js 文件中导入 add() 函数，并将它赋值给变量 add。然后，我们可以像调用任何其他函数一样调用它。
需要注意的是，我们在 import 语句中使用相对路径来指定导入的文件。在一些情况下，也可以使用绝对路径或模块名称来引用其他文件。
导出和导入多个函数
除了单独导出一个函数之外，我们还可以将多个函数一起导出，并在其他文件中同时导入它们。例如：
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}// index.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出 3
console.log(subtract(4, 2)); // 输出 2使用全局对象
除了使用 import 和 export 语句之外，我们还可以使用全局对象来访问其它 JS 文件中的函数。
在一个 JS 文件中定义一个函数，例如：
// math.js
function add(a, b) {
return a + b;
}
// 将 add() 函数添加到全局对象中
window.add = add;在这个例子中，我们将 add() 函数添加到 window 全局对象中，以便其他文件可以访问它。
然后，在另一个 JS 文件中，我们可以使用 window 全局对象来调用 add() 函数，例如：
// index.js console.log(window.add(1, 2)); // 输出 3
需要注意的是，使用全局对象的方法并不推荐。因为它会污染全局命名空间并可能导致命名冲突和其他问题。
总结
在前端开发中，我们可以使用 import 和 export 语句来调用其他 JS 文件中的函数，也可以使用全局对象来访问它们。使用 import 和 export 更加安全、可维护和可重用，因此应该优先考虑使用这种方法。
示例代码：https://codepen.io/ChatGPT/pen/mdrYMPd
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9505
