JavaScript 函数声明和函数表达式——理解函数定义的细微差别

2023-12-30 03:06:09

函数声明与函数表达式的对比：JavaScript 中函数定义的两种方式

前言

在 JavaScript 中，函数是执行特定任务的代码块。定义函数有两种主要方式：函数声明和函数表达式。了解这两者之间的区别至关重要，因为它影响着代码的可读性、可维护性和可预测性。

函数声明与函数表达式：定义方式

函数声明

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

函数声明以 function 开始，后跟函数名称、圆括号和函数体（大括号内的代码块）。它可以在作用域的任何位置声明，并在编译时提升到作用域顶部。

函数表达式

const greet = function (name) {
  console.log(`Hello, ${name}!`);
};

函数表达式以关键字 const 或 let 开始，后面跟一个可选的函数名称（通常省略）、圆括号和函数体。它与变量声明类似，被赋值为一个匿名函数。

提升：提前访问

函数声明

函数声明在代码执行之前被提升到作用域顶部。这意味着即使它们出现在代码块的中间，也可以从该代码块的任何位置调用它们。

函数表达式

函数表达式不会提升。只能在它们被声明之后调用它们。在声明之前尝试调用它们会引发错误。

作用域：访问范围

函数声明

函数声明具有全局作用域或函数作用域，具体取决于它们的声明位置。这意味着它们可以在声明它们的代码块以及嵌套在其内的任何其他代码块中访问。

函数表达式

函数表达式具有块作用域。这意味着它们只能在声明它们的代码块内访问。在代码块外部尝试访问它们会引发错误。

上下文访问：内部引用

函数声明

函数声明可以通过它们的函数名称在函数内部引用。这允许递归调用和动态绑定。

函数表达式

函数表达式可以通过它们的变量名在函数内部引用。它们不能使用自己的函数名称。

代码示例：对比

// 函数声明
function greetDeclared(name) {
  console.log(`Hello, ${name}!`);
  greetDeclared('John'); // 可访问
}

// 函数表达式
const greetExpressed = function (name) {
  console.log(`Hello, ${name}!`);
  greetExpressed('John'); // 可访问
};

// 函数声明 - 提前访问
greetDeclared(); // 可访问

// 函数表达式 - 错误：提前访问
greetExpressed(); // 错误