在前端开发中，我们经常需要在一个函数中调用另一个函数。当这个被调用的函数是在同一个文件或者同一作用域下时，可以直接通过函数名来调用。但当被调用的函数定义在其他文件或作用域中时，就需要引用这个函数了。
引用方式
JavaScript 中引用函数有两种方式：
- 直接通过函数名引用：如
func() - 通过对象属性引用：如
obj.func()
对于第一种方式，被引用的函数必须在当前作用域中定义或导入（import）进来。而对于第二种方式，则需要通过对象来引用函数，即调用对象的方法（method），对象本身可以是任何类型的值，包括函数。
导出函数
在模块化的前端代码中，为了让其他模块引用自己的函数，需要通过导出（export）机制来将函数暴露出去。ES6 中提供了两种导出方式：
- 命名导出（named export）
- 默认导出（default export）
命名导出
命名导出允许我们将多个函数、类或变量同时导出，如下所示：
// file1.js
export function func1() {}
export function func2() {}
// file2.js
import { func1, func2 } from './file1.js';在上述例子中，函数 func1 和 func2 都被导出，并在另一个文件中通过解构赋值的方式进行了引用。
默认导出
默认导出只允许导出一个值，如下所示：
// file1.js
export default function() {}
// file2.js
import func from './file1.js';在上述例子中，函数被默认导出，并在另一个文件中通过 import 语句直接引入。
引用函数
当我们需要在一个模块中引用其他模块导出的函数时，可以使用 import 语句。import 语句有多种形式，具体使用方法如下：
命名导入
命名导入允许我们将其他模块导出的函数作为当前模块的属性进行引用，如下所示：
// file1.js
export function func1() {}
export function func2() {}
// file2.js
import { func1, func2 } from './file1.js';在上述例子中，函数 func1 和 func2 都被导出，并在另一个文件中通过解构赋值的方式进行了引用。
默认导入
默认导入则允许我们将一个模块的默认导出作为当前模块的属性进行引用，如下所示：
// file1.js
export default function() {}
// file2.js
import func from './file1.js';在上述例子中，函数被默认导出，并在另一个文件中通过 import 语句直接引入。
示例代码
下面是一个示例代码，演示了如何在一个模块中引用其他模块导出的函数：
-- -------------------- ---- ------- -- -------- ------ -------- ------ -- - ------ - - -- - ------ -------- ------------ -- - ------ - - -- - -- -------- ------ - --- - ---- ------------- ------ - --------- - ---- ------------- ------------------ ---- -- -- - ------------------------ ---- -- -- --
在上述代码中，我们将两个函数 add 和 substract 导出到了 file1.js 模块中。在 file2.js 中，我们通过 import 语句分别引用了这两个函数，并在控制台输出了它们的运行结果。
总结
引用 JavaScript 函数是前端开发中常见的操作，通过模块化的方式
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15031