揭秘函数声明与函数表达式之间的玄机，代码质量的秘密武器
2023-12-15 16:06:33
JavaScript 中函数声明与函数表达式的区别
概述
JavaScript 中定义函数有两种主要方式：函数声明和函数表达式。虽然这两者都能用于执行代码块，但它们在语法、作用域和闭包方面存在一些关键差异。
函数声明
function sayHello() {
console.log("Hello, world!");
}
函数声明使用 function 后跟函数名和圆括号。函数体用花括号括起来，其中包含要执行的代码。函数声明在代码中被提升，这意味着它们可以在定义之前调用。
函数表达式
const sayHello = () => {
console.log("Hello, world!");
};
函数表达式使用箭头语法（=>）或匿名函数（function () {}）。函数体可以是花括号内的代码块，也可以是单行表达式。函数表达式必须在使用之前定义。
作用域
函数声明的作用域不同于函数表达式。函数声明的作用域是全局的或函数体的局部范围。这意味着函数声明可以在函数定义之前或之后调用。
相反，函数表达式的作用域仅限于其定义的块级作用域。这意味着函数表达式只能在定义之后调用。
// 函数声明
console.log(add(1, 2)); // 输出：3
function add(a, b) {
return a + b;
}
// 函数表达式
console.log(multiply(2, 3)); // 错误：multiply 不是函数
const multiply = (a, b) => {
return a * b;
};
闭包
闭包是指函数访问其定义范围之外的变量的能力。函数声明可以创建闭包，但函数表达式不能。
// 函数声明
function outerFunction() {
let counter = 0;
function innerFunction() {
counter++;
console.log(counter);
}
return innerFunction;
}
const innerFunction = outerFunction();
innerFunction(); // 输出：1
innerFunction(); // 输出：2
在这个例子中，innerFunction 闭包了 outerFunction 中的 counter 变量。
箭头函数
箭头函数是一种在 ES6 中引入的特殊类型的函数表达式。它们使用简洁的语法，没有自己的 this 关键字，也不能作为构造函数使用。
const add = (a, b) => a + b;
const multiply = (a, b) => {
return a * b;
};
什么时候使用函数声明和函数表达式？
函数声明和函数表达式各有优缺点：
函数声明
- 优点：可以提升，可以创建闭包
- 缺点：不能用于立即调用函数表达式
函数表达式
- 优点：不能提升，不能创建闭包
- 缺点：可以用于立即调用函数表达式
一般来说，应该在需要提升或创建闭包时使用函数声明。当需要立即调用函数表达式或避免创建闭包时，则应该使用函数表达式。
常见问题解答
1. 什么是函数提升？
函数提升是 JavaScript 的一个特性，它将函数声明提升到代码的顶部。这意味着函数声明可以在定义之前调用。
2. 什么是闭包？
闭包是函数访问其定义范围之外的变量的能力。函数声明可以创建闭包，但函数表达式不能。
3. 什么是箭头函数？
箭头函数是一种特殊类型的函数表达式，使用简洁的语法，没有自己的 this 关键字，也不能作为构造函数使用。
4. 我应该什么时候使用函数声明？
在需要提升或创建闭包时应该使用函数声明。
5. 我应该什么时候使用函数表达式？
在需要立即调用函数表达式或避免创建闭包时应该使用函数表达式。
