JavaScript 函数声明方式：技术与实践指南

传统函数声明（function 声明）

这是最经典的形式，使用 function 关键字后跟强制性名称定义。其最显著的技术特征之一是 提升，允许您在文件中出现在其物理定义 之前 的代码行中调用函数。

带参数的示例：

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World")); // "Hello, World!"

函数表达式

在此方法中，函数被视为分配给变量的 数据值。您可以使用 let、var 或 const 声明该变量。与声明不同，这些 不完全受提升影响；函数在执行到达赋值行之前不存在。

• 匿名： 没有显式名称。
• 命名： 包含内部标识符，对递归和调试很有用（它出现在堆栈跟踪中）。

示例：

const sum = function(a, b) {
  return a + b;
}; // 使用 'const' 有助于避免意外重新赋值

箭头函数

ES6 中引入的箭头函数提供了非常紧凑的语法，无需 function 关键字。它们最大的语义差异是 没有自己的 this 绑定；相反，它们从周围的词法作用域捕获 this。

• 简短语法： 如果只有一个参数和一行代码，可以省略括号、大括号和显式 return。

示例：

const square = x => x * x; // 隐式返回

对象和类中的方法定义（简写）

这是在 对象字面量 或 类 内声明函数的简写语法，省略冒号和 function 关键字。这些方法是唯一可以访问 super 绑定的方法。

对象中的示例：

const calculator = {
  value: 10,
  double() {
    return this.value * 2;
  } // 简洁语法
};

异步函数（async）

用 async 前缀标记的函数 总是返回 Promise。它们允许在其体内使用 await 来以非阻塞方式暂停执行，直到 Promise 解决。

示例：

async function fetchData() {
  const response = await fetch('url');
  return response.json();
}

生成器函数（function*）

它们用 function* 定义，允许非连续执行；它们可以暂停其状态并将控制权返回给调用者，使用 yield 关键字。

示例：

function* counter() {
  yield 1;
  yield 2;
}

立即调用函数表达式（IIFE）

这些是定义时立即运行的函数。它们主要用于创建 私有作用域 并避免污染全局命名空间。

示例：

(function() {
  const message = "Private";
  console.log(message);
})();

Function 构造函数（不推荐）

Function 构造函数允许在运行时从字符串动态创建函数。由于 安全风险 和 JavaScript 引擎的不良优化，不建议使用它。

示例：

const dynamicSum = new Function('a', 'b', 'return a + b');

理解差异的类比

想象一个 函数声明 就像厨房里刻在石头上的 食谱：它一直都在那里，即使在轮班开始之前每个人都知道在哪里找到它。函数表达式 就像你当场写的 便利贴：只有在写完并贴在墙上后才能遵循其说明。最后，箭头函数 就像使用你已经在做的事情的上下文来完成快速任务而不需要完整厨房的 心理捷径。