js进阶——函数作用域和块作用域
函数作用域和块作用域详解
JavaScript 中的作用域（scope）是指变量、函数等资源的可访问范围。理解作用域是掌握 JavaScript 的核心之一，尤其是在编写复杂代码时，掌握作用域能避免变量冲突、提升代码可维护性。JavaScript 主要有两类作用域：函数作用域 和 块作用域。我们将详细讲解这些概念，并深入分析相关的特性和用法。
一、函数作用域
函数作用域是 JavaScript 中传统的作用域模型。函数内部声明的变量和函数只能在该函数体内访问，函数外无法访问它们。
1. 函数中的作用域
当我们在函数中声明变量时，它们的作用范围只限于该函数体内部，函数外部无法访问这些变量：
function test() {
var x = 10;
console.log(x); // 10
}
test();
console.log(x); // Uncaught ReferenceError: x is not defined
这里的变量 x 被定义在 test 函数内部，因此它只能在 test 内部访问，函数外部访问会抛出 ReferenceError。
2. 隐藏内部实现
函数作用域还有一个重要的特性是隐藏实现细节。通过在函数内部声明变量，我们可以隐藏这些变量的实现，使它们只在函数内部可用，而外部看不到这些实现。
function secret() {
var hidden = "This is hidden!";
return "Visible output!";
}
console.log(secret()); // "Visible output!"
console.log(hidden); // Uncaught ReferenceError: hidden is not defined
上例中，hidden 变量被隐藏在 secret 函数内，外部代码无法访问它，起到了信息隐藏的效果。
二、函数作用域（匿名和具名、IIFE）
1. 匿名函数与具名函数
- 具名函数：有名称的函数，可以通过函数名进行调用。
function greet() {
console.log("Hello!");
}
greet(); // "Hello!"
- 匿名函数：没有名称的函数，常用于赋值给变量或者作为回调函数。
var greet = function() {
console.log("Hello!");
};
greet(); // "Hello!"
匿名函数不能通过名称直接调用，但可以通过变量或函数引用调用。
2. 立即执行函数表达式 (IIFE)
立即执行函数表达式（IIFE，Immediately Invoked Function Expression）是一个被定义后立即执行的函数。IIFE 常用于创建独立的作用域，从而避免全局污染。
(function() {
var message = "This is an IIFE";
console.log(message); // "This is an IIFE"
})(); // 此处的 () 表示立即执行
IIFE 的核心特点是，它能够创建一个独立的作用域，其中的变量不会泄露到外部作用域。这是通过包裹在一对小括号中，将其变为一个表达式，并紧接着调用该表达式。
三、块作用域
块作用域是由 let、const 和 ES6 引入的 class 等关键字所实现的，作用范围仅限于代码块 {} 内，与传统的 var 不同，let 和 const 具有块级作用域。
1. let 和 const
let：声明的变量具有块作用域，只能在声明所在的块内访问。
{
let x = 10;
console.log(x); // 10
}
console.log(x); // Uncaught ReferenceError: x is not defined
const：与let类似，声明的常量同样具有块作用域，且它的值不能被重新赋值。
{
const y = 20;
console.log(y); // 20
// y = 30; // Uncaught TypeError: Assignment to constant variable.
}
console.log(y); // Uncaught ReferenceError: y is not defined
let 和 const 的块作用域解决了 var 的作用域提升问题，使得变量在声明之前无法访问。
2. try/catch 块作用域
try/catch 块引入了一个新作用域，尤其是 catch 子句中的变量只在 catch 块内有效：
try {
throw new Error("Oops!");
} catch (error) {
console.log(error.message); // "Oops!"
}
console.log(error); // Uncaught ReferenceError: error is not defined
在 catch 块中声明的 error 变量，只能在 catch 块内部访问，外部无法访问该变量。
3. with 语句
with 语句创建了一个以指定对象为上下文的块作用域，允许直接访问对象的属性，但其使用并不推荐，因为它会导致难以预测的作用域链问题。
var obj = { a: 10, b: 20 };
with (obj) {
console.log(a); // 10
console.log(b); // 20
}
with 的主要问题在于它会影响代码的可读性和性能，因此通常建议避免使用 with。
四、小结
-
函数作用域 是 JavaScript 中的传统作用域模型。函数内部的变量和函数无法被外部访问，且通过闭包或 IIFE 可以实现信息隐藏。
-
匿名函数 和 具名函数 是 JavaScript 中定义函数的两种方式，匿名函数常用在回调或作为 IIFE。
-
立即执行函数表达式 (IIFE) 是一种创建独立作用域并避免变量污染的常用技术。
-
块作用域 是由
let、const等引入的，解决了var的作用域提升问题，变量在块作用域内有效。 -
try/catch和with引入了独立的块作用域，with虽然能简化访问对象的属性，但由于其引发的作用域链问题，不推荐使用。
理解这些作用域概念和使用场景，能帮助开发者更好地控制代码的可维护性与性能，特别是在处理复杂逻辑时，掌握作用域的原理能避免许多常见的 JavaScript 错误。