JavaScript 中函数声明和函数表达式的区别是什么？

推荐答案

在 JavaScript 中，函数声明和函数表达式的主要区别在于它们的定义方式和提升行为。

1. 函数声明：

   • 使用 function 关键字直接定义函数。
   • 函数声明会被提升（hoisted），即在代码执行前，函数声明会被移动到当前作用域的顶部。
   • 可以在函数声明之前调用该函数。

   console.log(add(2, 3)); // 5
   function add(a, b) {
       return a + b;
   }

2. 函数表达式：

   • 将函数赋值给一个变量或属性。
   • 函数表达式不会被提升，只有在赋值语句执行后，函数才可用。
   • 在函数表达式之前调用该函数会导致错误。

   console.log(add(2, 3)); // TypeError: add is not a function
   var add = function(a, b) {
       return a + b;
   };

本题详细解读

1. 函数声明

函数声明是通过 function 关键字直接定义的函数。它的一个重要特性是提升（hoisting）。提升意味着无论函数声明在代码中的哪个位置，JavaScript 引擎都会在代码执行前将其移动到当前作用域的顶部。因此，你可以在函数声明之前调用该函数，而不会报错。

console.log(add(2, 3)); // 5
function add(a, b) {
    return a + b;
}

在这个例子中，add 函数在声明之前被调用，但由于函数声明的提升特性，代码仍然可以正常运行。

2. 函数表达式

函数表达式是将函数赋值给一个变量或属性。与函数声明不同，函数表达式不会被提升。这意味着在赋值语句执行之前，函数是不可用的。如果在函数表达式之前调用该函数，会导致 TypeError。

console.log(add(2, 3)); // TypeError: add is not a function
var add = function(a, b) {
    return a + b;
};

在这个例子中，add 函数在赋值之前被调用，由于函数表达式不会被提升，因此会抛出错误。

3. 其他区别

• 命名函数表达式：函数表达式可以是匿名的，也可以有名字。命名函数表达式在调试时更有用，因为函数名会出现在调用栈中。

  var add = function sum(a, b) {
      return a + b;
  };
  console.log(sum(2, 3)); // ReferenceError: sum is not defined

  在这个例子中，sum 是函数表达式的名字，但它只在函数内部可见，外部无法访问。

• 立即执行函数表达式（IIFE）：函数表达式可以立即执行，通常用于创建独立的作用域。

  (function() {
      console.log("IIFE executed");
  })();

  这种模式常用于避免污染全局命名空间。

4. 总结

• 函数声明：提升，可以在声明前调用。
• 函数表达式：不提升，必须在赋值后调用。
• 命名函数表达式：有助于调试，但名字只在函数内部可见。
• IIFE：立即执行的函数表达式，常用于创建独立作用域。