解释函数 foo() {} 和 var foo = 函数() {} 对 foo 的用法的区别

在介绍函数 foo() {} 和 var foo = 函数() {} 对 foo 的用法的区别之前，我们先来了解一下这两种函数定义的概念。

函数声明 foo() {}

函数声明是在代码中用关键字 function 后跟一个函数名称和一对花括号来定义的。这种方式会将函数绑定到指定的名称上，并且在整个代码块范围内都可见。

function foo() {
  // 函数的代码逻辑
}

函数声明可以在其他代码之前调用，因为在 JavaScript 的预解析阶段，所有函数声明都会被提前到作用域的顶部。

函数表达式 var foo = 函数() {}

函数表达式是将一个未命名的函数分配给一个变量，以便通过该变量来访问该函数。这种方式将函数视为一个值，可以像其他变量一样进行传递和操作。

var foo = function() {
  // 函数的代码逻辑
};

函数表达式将函数赋值给一个变量，所以变量 foo 就成为了函数名。可以在变量 foo 所在的作用域中通过变量名来调用该函数。

区别对比

主要区别如下：

1. 作用域范围不同

• 函数声明 foo() {} 的作用域是整个块级作用域，即使在函数声明之前调用该函数也没有问题。
• 函数表达式 var foo = 函数() {} 的作用域只限于所在的函数内部或所在的块级作用域。

2. 预解析阶段不同

• 函数声明会在预解析阶段被提前到作用域的顶部，所以在代码中的任何位置都可以调用函数。
• 函数表达式是在代码流执行到达时进行赋值，所以只有在赋值语句之后才能够调用该函数。

3. 变量命名提升不同

• 函数声明会进行变量名的提升，意味着在声明之前就可以使用函数名来调用函数。
• 函数表达式不会进行变量名的提升，所以在赋值之前使用函数名会导致错误。

示例

下面是一个示例，演示了函数声明和函数表达式的用法和区别：

// 函数声明
foo(); // 可以在函数声明之前调用
function foo() {
  console.log("Hello from function declaration!");
}

// 函数表达式
bar(); // 在赋值之前调用会导致错误
var bar = function() {
  console.log("Hello from function expression!");
};

使用建议

• 如果你的函数需要在声明之前被调用或者需要在全局作用域中使用，使用函数声明。
• 如果你需要将一个函数作为一个值来传递或者需要控制函数的可见范围，使用函数表达式。

总之，函数声明和函数表达式在作用域范围、预解析阶段和变量命名提升等方面有所不同，我们在使用时需要根据具体的需求进行选择。