JavaScript 作用域

个人主页：康师傅前端面馆

在 JavaScript 开发中，作用域是一个核心概念，它决定了变量和函数的可访问性。理解和正确使用作用域能够帮助我们避免许多常见的编程错误。

什么是作用域？

作用域（Scope）是程序中定义变量的区域，它决定了哪些变量可以在何处被访问。JavaScript 中的作用域主要分为以下几种：

全局作用域（Global Scope）
函数作用域（Function Scope）
块级作用域（Block Scope）

作用域类型详解

1. 全局作用域

在任何函数外部声明的变量属于全局作用域，这些变量在整个程序中都可以被访问。

javascript 复制代码

var globalVar = "I'm global";
let globalLet = "I'm also global";

function someFunction() {
    console.log(globalVar); // 可以访问
    console.log(globalLet); // 可以访问
}

2. 函数作用域

在函数内部声明的变量属于函数作用域，只能在该函数内部被访问。

javascript 复制代码

function myFunction() {
    var functionVar = "I'm in function scope";
    let functionLet = "I'm also in function scope";
    
    console.log(functionVar); // 可以访问
    console.log(functionLet); // 可以访问
}

myFunction();
console.log(functionVar); // ReferenceError: functionVar is not defined

3. 块级作用域

使用 let 和 const 声明的变量具有块级作用域，它们只在声明它们的块（如 if 语句、for 循环等）中可访问。

javascript 复制代码

if (true) {
    var varVariable = "I'm not block scoped";
    let letVariable = "I'm block scoped";
    const constVariable = "I'm also block scoped";
}

console.log(varVariable);     // 可以访问
console.log(letVariable);     // ReferenceError: letVariable is not defined
console.log(constVariable);   // ReferenceError: constVariable is not defined

变量提升对作用域的影响

变量提升（Hoisting）是 JavaScript 中的一个重要概念，它会影响变量和函数在作用域中的行为。

1. var 声明的提升

使用 var 声明的变量会被提升到其作用域的顶部，但只有声明被提升，赋值不会被提升。

javascript 复制代码

console.log(myVar); // undefined（不是 ReferenceError）
var myVar = 5;
console.log(myVar); // 5

// 上面的代码实际上等价于：
// var myVar;
// console.log(myVar); // undefined
// myVar = 5;
// console.log(myVar); // 5

2. let 和 const 声明的提升

虽然 let 和 const 也会被提升，但由于暂时性死区（Temporal Dead Zone）的存在，它们在声明之前无法访问。

javascript 复制代码

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

3. 函数声明的提升

函数声明会被完全提升，包括函数体，因此可以在声明之前调用函数。

javascript 复制代码

myFunction(); // "Hello, World!"

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

// 上面的代码实际上等价于：
// function myFunction() {
//     console.log("Hello, World!");
// }
// myFunction(); // "Hello, World!"

4. 函数表达式的提升

函数表达式的行为与变量声明类似，只有变量名被提升，函数体不会被提升。

javascript 复制代码

myFunc(); // TypeError: myFunc is not a function

var myFunc = function() {
    console.log("Hello from function expression");
};

// 上面的代码实际上等价于：
var myFunc;
myFunc(); // TypeError: myFunc is not a function
myFunc = function() {
    console.log("Hello from function expression");
};

作用域链

当访问一个变量时，JavaScript 会首先在当前作用域中查找，如果找不到，会沿着作用域链向上查找，直到找到该变量或到达全局作用域。

javascript 复制代码

var globalVar = "I'm global";

function outerFunction() {
    var outerVar = "I'm in outer function";
    
    function innerFunction() {
        var innerVar = "I'm in inner function";
        
        console.log(innerVar);  // 当前作用域
        console.log(outerVar);  // 外层作用域
        console.log(globalVar); // 全局作用域
    }
    
    innerFunction();
}

outerFunction();

最佳实践

优先使用 let 和 const ：避免 var 带来的提升问题和函数作用域的限制
避免全局变量：尽量减少全局作用域中的变量声明，防止命名冲突
理解作用域链：合理利用作用域链来组织代码结构
注意变量提升：理解提升机制，避免在声明前使用变量