不同JS文件间函数互相调用的实现与注意事项
本文详解如何在不同JS文件间实现函数互相调用。通过HTML引入多个JS文件，可实现全局与局部两种调用方式。全局调用需严格遵循被调用文件先引用的顺序，否则报错；局部调用（如事件内部）则引用顺序不限。文章结合闭包与具体代码示例，解析变量提升与执行顺序对调用的影响。
探讨如何在两个独立的JavaScript文件之间实现函数的相互调用。
这是在实际开发中遇到的封装需求。
核心思路是探究是否可以在一个JS文件中直接引用并调用另一个JS文件定义的function。
这种做法能显著减少代码冗余，降低维护成本。
接下来直接展示具体实现代码。
首先，需要在HTML页面中同时引入这两个JS文件。
HTML文件结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<script src="1.js"></script>
<script src="2.js"></script>
<body>
</body>
</html>1.js文件内容：
function a(){
alert(1);
}2.js文件内容：
a();通过上述方式，2.js即可直接调用1.js中定义的a函数。
上述仅为基础方法，下面介绍一种利用闭包实现的方法（同样简单）。
HTML文件结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<script src="1.js"></script>
<script src="2.js"></script>
<body>
</body>
</html>1.js文件内容：
var dianji;
(function(){
dianji = {
a:function(){
alert(1);
}
}
})()此处的1.js采用对象函数且为闭包形式，因此必须将dianji变量提升至全局作用域。这样在2.js中才能正常调用该函数，否则会抛出变量未定义的错误。
要实现JS文件间函数的互相调用，关键前提是函数必须处于全局作用域。
2.js文件内容：
dianji.a();不同JS文件之间函数的相互调用
在开发复杂界面业务逻辑时，通常会将所有函数集中写在一个JS文件中。但随着功能增加，文件会变得臃肿且逻辑混乱。为避免此问题，应在编码初期对不同功能进行封装（即分散至不同JS文件），从而降低代码耦合度。
这便引出了不同JS文件间函数相互调用的问题。
解决方法很简单：只需在同一个HTML文件中引用不同的JS文件，即可在任一JS文件中调用其他JS文件封装的函数。
根据调用函数位置的不同，可将调用方式分为全局调用和局部调用两类。
需要注意的是：不同的调用方式，细节上稍有区别。
1、全局调用
所谓全局调用，就是在函数外部调用其他JS文件中封装的函数。
(1)被调用的JS文件先引用
例如：test.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>
注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。
- a.js内容：
function a()
{
alert("a.js is loading");
}
- b.js内容：
a();
function b()
{
alert("b.js is loading");
}
刷新界面，输出：“a.js is loading”，如下图所示。
(2)被调用的JS文件后引用
例如：保持test.html文件不变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>
注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。
- a.js修改为：
b();
function a()
{
alert("a.js is loading");
}
- b.js修改为：
function b()
{
alert("b.js is loading");
}
刷新界面，此时会报错b()函数未定义，如下图所示。
因此，全局调用时，被调用的JS文件要先引用。
2、局部调用
所谓局部调用，就是在函数内部调用其他JS文件中封装的函数。
将test.html修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<input type="button" value="测试" onclick="a1()"/>
</body>
</html>
注：使用VS Code新建html文件，输入“html:5”，回车即可生成HTMl文件的框架。
- a.js修改为：
function a1()
{
alert("function a1 run success.");
b();
}
function a2()
{
alert("function a2 run success.");
}
- b.js修改为：
function b()
{
alert("function b run success.");
a2();
}
点击“测试”按钮，此时会依次输出：“function a1 run success.”，“function b run success.”，“function a2 run success.”。
由此可见，局部调用时，引用不分先后，想在哪调就在哪调。
心得
若采用全局调用的方式，则被调用的JS文件要先引用；若采用局部调用的方式，则引用不分先后，想在哪调就在哪调。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19