JavaScript 中函数声明和函数表达式：你真的了解它们之间的差异吗？

引言

你是否曾想过在JavaScript中定义函数的不同方式可能会对你的代码产生何种影响？函数声明和函数表达式，这两者之间的微妙差异可能是你编写健壮、高效代码的关键。在本文中，我们将深入探讨JavaScript中函数声明和函数表达式的差异，解开这个编程谜题的面纱。你真的了解它们之间的差异吗？让我们一起探索吧。

1. 基本语法

在JavaScript中，函数声明和函数表达式是定义函数的两种常见方式。它们的基本语法如下：

函数声明

js 复制代码

function myFunction() {
  // 函数体
}

函数声明以 function 关键字开头，后面跟着函数的名称和一对花括号，包含函数体。

函数表达式

js 复制代码

var myFunction = function() {
  // 函数体
};

函数表达式将一个匿名函数赋值给变量（或常量）。注意，函数表达式可以是匿名的，也可以是具名的。

2. 变量提升

在JavaScript中，变量和函数声明会被提升到当前作用域的顶部。然而，函数表达式的赋值部分不会被提升，而函数声明会。

函数声明的变量提升

js 复制代码

hello(); // 可以正常调用

function hello() {
  console.log("Hello, world!");
}

在函数声明中，整个函数体都会被提升，因此在声明之前就能够调用函数。

函数表达式的变量提升

js 复制代码

// 以下代码将会报错
// myFunction(); // TypeError: myFunction is not a function

var myFunction = function() {
  console.log("Function expression");
};

在函数表达式中，只有变量声明（var myFunction）会被提升，而赋值部分直到执行代码时才会生效。因此，在赋值之前调用函数会导致 TypeError。

3. 匿名函数与命名函数

在JavaScript中，函数可以是匿名的（没有名称），也可以是命名的。这一差异在函数声明和函数表达式中体现得尤为明显。

函数声明

函数声明可以是匿名的，也可以是命名的：

js 复制代码

// 匿名函数声明
function() {
  // 函数体
}

// 命名函数声明
function namedFunction() {
  // 函数体
}

在函数声明中，命名函数通常用于提高代码的可读性和调试过程中的可识别性。

函数表达式

函数表达式可以是匿名的，也可以是命名的：

js 复制代码

// 匿名函数表达式
var myFunction = function() {
  // 函数体
};

// 命名函数表达式
var namedFunction = function named() {
  // 函数体
};

函数表达式中的命名通常在递归和调试时更具用处。然而，注意在命名函数表达式中，函数名称在函数体外部不可见。

4. 作用域

理解函数声明和函数表达式在作用域中的行为差异对于编写可靠的JavaScript代码至关重要。

函数声明的作用域

函数声明的作用域通常在整个函数体内，甚至在函数体外也能访问：

js 复制代码

if (true) {
  function declarationScope() {
    console.log("Function Declaration Scope");
  }
}

declarationScope(); // 在某些情况下会正常运行

尽管在某些环境中可能正常运行，但这样的代码容易引发跨浏览器兼容性问题，因为不同的浏览器可能会以不同的方式处理函数声明的作用域。

函数表达式的作用域

函数表达式的作用域与变量的作用域相同，即限定在声明它的块级作用域内：

js 复制代码

if (true) {
  var expressionScope = function() {
    console.log("Function Expression Scope");
  };
}

// 以下代码将会报错
// expressionScope();

在上述代码中，expressionScope 函数在 if 语句块内声明，超出该块级作用域无法访问。

5. 使用场景和最佳实践

在实际开发中，选择函数声明还是函数表达式取决于具体的使用场景。以下是一些使用场景和最佳实践，帮助你更明智地选择适合你代码的方式。

函数声明的使用场景

需要在文件的任何位置都能调用函数： 如果你希望在文件的任何地方都能够调用函数，函数声明是一个不错的选择，因为它会被提升到作用域的顶部。
提高代码的可读性： 函数声明具有清晰的标识性，特别是在大型项目中，有助于提高代码的可读性。

函数表达式的使用场景

需要在特定条件下创建函数： 如果你的函数只在特定条件下才需要创建，函数表达式可以根据需要灵活地定义和调用。
需要更细粒度的控制： 函数表达式允许你在赋值时控制函数的行为，这在一些情况下提供了更细粒度的控制。
使用匿名函数或闭包： 如果你需要使用匿名函数或创建闭包，函数表达式是更适合的选择。

结论

函数声明和函数表达式是JavaScript中定义函数的两种主要方式，它们在行为和用法上存在着一些关键的差异。通过本文的深入探讨，我们总结出一些关键的观点：

变量提升： 函数声明整体被提升，可以在声明之前调用；而函数表达式的赋值部分不会提升，导致在赋值之前调用可能会引发错误。
作用域： 函数声明的作用域可能存在一些跨浏览器的差异，而函数表达式的作用域受限于声明它的块级作用域。
匿名与命名： 函数声明和函数表达式都可以是匿名的，也可以是命名的。命名函数有助于提高代码的可读性和调试过程的可识别性。
使用场景： 函数声明适用于需要在文件的任何位置都能够调用的情况，提高代码的可读性。函数表达式更适合在特定条件下创建函数，以及需要更细粒度控制的场景。

如果对函数声明和函数表达式感兴趣，也可以阅读[你分得清：function Person(){}、var person = Person()和var person = new Person()吗？ ](- 掘金 (juejin.cn))