JavaScript function的如下两种用法有什么区别呢

JavaScript 中函数（Function）的两种常见用法是：函数声明（Function Declarations）和函数表达式（Function Expressions）。这两种用法的主要区别在于它们的声明方式、提升行为（Hoisting）、匿名性和作用域。函数声明以 function 关键字开头，后跟函数名称和函数体，它们在代码执行前就已经可用，因为 JavaScript 引擎会提前读取函数声明。而函数表达式则是将一个匿名函数或具名函数赋值给变量，只有在解释到该行代码时才可用，因为它遵循变量的作用域和提升规则。

一、声明方式

函数声明是使用 function 关键字定义的，后面紧跟着函数名和函数体。例如：

function greet() {
    console.log("Hello World!");
}

这种方式的函数在整个脚本或局部作用域中都是可见的，且在代码执行之前就已经被 JavaScript 引擎解析和初始化。

相较之下，函数表达式通常是匿名的，将一个函数赋值给一个变量。不过，也可以给函数表达式命名，这在调试或递归调用时特别有用。举个例子：

const greet = function() {
    console.log("Hello World!");
};

这里的函数直到解释器执行到该行代码之前，都不会被解析和初始化。

二、提升行为（Hoisting）

函数声明具有提升特性，意味着无论函数被定义在何处，都会被提升到作用域的顶部。因此，即使在函数声明之前调用函数，代码也能正常工作：

greet();
function greet() {
    console.log("Hello from above!");
}

而函数表达式由于是变量声明的一部分，所以只有变量名会被提升，而赋值的函数本身不会。这就意味着，只有在函数表达式被赋值之后，函数才能被调用：

// 这会导致一个TypeError
try {
    greet();
} catch (e) {
    console.log(e); // greet is not a function
}
const greet = function() {
    console.log("Hello from below!");
};

三、匿名性

函数表达式通常是匿名的，尽管也可以是具名的。匿名函数表达式的一个主要好处是它使代码更简洁，尤其是在作为参数传递给其他函数时。例如，在数组的 .map() 方法中使用匿名函数表达式：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
    return number * 2;
});

然而，匿名函数的一个缺点是它们在调试时不如具名函数表达式易于识别，因为堆栈跟踪不会显示函数名。

四、作用域

函数声明和函数表达式的作用域规则与其它类型的变量相同。如果它们在顶层脚本中定义，则为全局作用域；如果在函数内部定义，则为局部作用域。然而，需要注意的是，即使是函数表达式，如果它是在顶层作用域中定义的，它赋值的变量也具有全局作用域：

var globalFunction = function() {
    console.log("I'm global!");
};

在 JavaScript ES6 引入了 let 和 const，对于通过这两种声明方式创建的函数表达式，它们的作用域会被限制在声明它们的块中，而不是整个函数或全局作用域。

总结

函数声明和函数表达式是 JavaScript 中定义函数的两种主要方式。它们之间的主要区别在于提升行为、是否默认匿名、以及语法形式上的差异。理解这些差异有助于编写更清晰、更有维护性的代码，并避免潜在的陷阱。在实践中，选择哪一种方式取决于特定的场景需求和个人偏好。

相关问答FAQs：

1. JavaScript function的不同用法有哪些？

JavaScript function有两种主要的用法：函数声明和函数表达式。

函数声明是通过使用function关键字和一个函数名称来定义的，例如：function myFunction() { ... }。它可以在任何地方被调用，包括它自己的定义之前。
函数表达式是将函数分配给一个变量，例如：let myFunction = function() { ... }。它只能在分配之后被调用。

2. 函数声明和函数表达式有什么区别？