JavaScript 中的自执行函数、函数类型和函数表达式：概念、异同与实例

自执行函数：

自执行函数是指在定义时立即执行的函数。它通常使用圆括号将函数体括起来，并在圆括号前加一个感叹号 (!) 来表示立即执行。自执行函数的语法如下：

(function () {
  // 函数体
})();

自执行函数的主要特点是：

• 立即执行： 自执行函数在定义时立即执行，因此可以在函数内部访问和操作变量，而无需显式调用。
• 变量作用域： 自执行函数内部的变量的作用域仅限于该函数内部，不会污染全局作用域。
• 闭包： 自执行函数可以创建闭包，闭包是指函数内部可以访问外部作用域的变量。

函数类型：

函数类型是指将函数作为值来传递或存储的类型。函数类型可以用于定义高阶函数，高阶函数是指可以接受函数作为参数或返回函数的函数。函数类型的语法如下：

type Function = (...args: any[]) => any;

函数类型的主要特点是：

• 类型安全： 函数类型可以保证函数的参数和返回值的类型安全。
• 可重用性： 函数类型可以提高代码的可重用性，因为函数可以作为参数传递或存储在变量中，以便在需要时重用。
• 灵活性： 函数类型可以增强代码的灵活性，因为可以根据需要动态地传递或返回不同的函数。

函数表达式：

函数表达式是指将函数定义为表达式的一部分的函数。函数表达式通常使用箭头函数 (=>) 或传统函数声明来定义。函数表达式的语法如下：

// 箭头函数
const add = (a, b) => a + b;

// 传统函数声明
const subtract = function (a, b) {
  return a - b;
};

函数表达式的主要特点是：

• 简洁性： 函数表达式比传统函数声明更简洁，尤其是对于短函数。
• 灵活性： 函数表达式可以作为参数传递或存储在变量中，以便在需要时使用。
• 闭包： 函数表达式可以创建闭包，闭包是指函数内部可以访问外部作用域的变量。

三者区别：

自执行函数、函数类型和函数表达式虽然都是函数形式，但它们在概念、特点和使用场景上各具特色。下表总结了三者的主要区别：

特征	自执行函数	函数类型	函数表达式
执行时机	定义时立即执行	作为值传递或存储	定义时不执行，需要显式调用
作用域	内部变量的作用域仅限于该函数内部	可以访问外部作用域的变量	可以访问外部作用域的变量
语法	使用圆括号将函数体括起来，并在圆括号前加一个感叹号 (!)	使用 type Function = (...args: any[]) => any; 定义	使用箭头函数 (=>) 或传统函数声明来定义
主要应用场景	创建闭包，立即执行代码，避免污染全局作用域	定义高阶函数，提高代码的可重用性和灵活性	提高代码的简洁性和灵活性，创建闭包

实例：

为了更好地理解这三种函数形式，我们来看几个实例：

// 自执行函数
(function () {
  console.log('自执行函数');
})();

// 函数类型
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;

console.log(add(1, 2)); // 3
console.log(subtract(3, 2)); // 1

// 函数表达式
const multiply = (a: number, b: number): number => a * b;

console.log(multiply(2, 3)); // 6

在上面的实例中，我们定义了一个自执行函数来立即执行代码，避免污染全局作用域。我们还定义了一个函数类型 MathOperation，并使用它来定义两个高阶函数 add 和 subtract。最后，我们定义了一个函数表达式 multiply 来计算两个数字的乘积。

总结：

自执行函数、函数类型和函数表达式是 JavaScript 中三种常见的函数形式，它们在概念、特点和使用场景上各具特色。自执行函数适合创建闭包，立即执行代码，避免污染全局作用域；函数类型适合定义高阶函数，提高代码的可重用性和灵活性；函数表达式适合提高代码的简洁性和灵活性，创建闭包。掌握这三种函数形式及其异同，可以帮助我们编写出更优雅、更健壮的 JavaScript 代码。