JavaScript 作用域

在 JavaScript 中，作用域（Scope）是一个非常重要的概念，它决定了变量、函数和对象在代码中的可访问性。理解作用域对于编写高效、无错误的 JavaScript 代码至关重要。本文将详细介绍 JavaScript 中的作用域类型、作用域链、词法作用域以及作用域中的常见问题。

1. 作用域的类型

JavaScript 中有三种主要的作用域类型：全局作用域、函数作用域和块级作用域（ES6 引入）。

1.1 全局作用域

在全局作用域中声明的变量或函数可以在整个 JavaScript 代码中访问。全局作用域中的变量会成为全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象）的属性。

var globalVar = "I am global";

function globalFunction() {
    console.log(globalVar); // 可以访问全局变量
}

globalFunction(); // 输出: I am global
console.log(window.globalVar); // 在浏览器中输出: I am global

1.2 函数作用域

函数作用域意味着变量或函数只在其定义的函数内部可访问。每个函数都有自己的作用域，函数内部声明的变量不会影响到函数外部的同名变量。

function myFunction() {
    var functionVar = "I am local to this function";
    console.log(functionVar); // 可以访问函数内部变量
}

// console.log(functionVar); // 会报错: functionVar is not defined

注意：在 ES6 之前，JavaScript 只有全局作用域和函数作用域。使用 var 关键字声明的变量具有函数作用域（或在全局作用域中声明时具有全局作用域）。

1.3 块级作用域（ES6 引入）

块级作用域是由一对花括号 {} 包围的作用域。块级作用域允许在单个块中声明变量，并且这些变量在该块外部是不可访问的。块级作用域通过 let 和 const 关键字引入。

if (true) {
    let blockVar = "I am block scoped";
    console.log(blockVar); // 可以访问块内变量
}

// console.log(blockVar); // 会报错: blockVar is not defined

2. 作用域链

作用域链是 JavaScript 引擎在查找变量时遵循的路径。当在函数内部访问一个变量时，JavaScript 引擎会首先在当前函数的作用域中查找该变量。如果找不到，它会沿着作用域链向上查找，直到找到该变量或到达全局作用域为止。

var globalVar = "global";

function outerFunction() {
    var outerVar = "outer";

    function innerFunction() {
        var innerVar = "inner";
        console.log(innerVar); // 访问当前作用域的变量
        console.log(outerVar); // 沿作用域链向上查找
        console.log(globalVar); // 沿作用域链向上查找至全局作用域
    }

    innerFunction();
}

outerFunction();

3. 词法作用域

词法作用域（也称为静态作用域）意味着作用域在代码编写时就已经确定了，而不是在代码执行时。函数在定义时所处的作用域就是它的词法作用域。

function outerFunction() {
    var outerVar = "I am from outer function";

    function innerFunction() {
        console.log(outerVar); // 即使在 outerFunction 外部调用，也能访问 outerVar
    }

    return innerFunction;
}

const innerFunc = outerFunction();
innerFunc(); // 输出: I am from outer function

注意：即使在 outerFunction 外部调用 innerFunction，innerFunction 仍然可以访问 outerVar，因为它在定义时处于 outerFunction 的作用域内。

4. 作用域中的常见问题

4.1 变量提升（Hoisting）

变量提升是指 JavaScript 引擎会将变量和函数声明提升到其作用域的顶部。但请注意，只有声明被提升，赋值操作不会被提升。

console.log(hoistedVar); // 输出: undefined，因为变量声明被提升，但赋值没有
var hoistedVar = "I am hoisted";

4.2 闭包

闭包是指函数能够记住并访问它的词法作用域中的变量，即使这个函数在词法作用域之外执行。闭包是 JavaScript 中的一个强大特性，它允许你创建私有变量和方法。

function createCounter() {
    let count = 0; // 私有变量
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

总结

理解 JavaScript 中的作用域是编写高效、可维护代码的关键。全局作用域、函数作用域和块级作用域各有其用途和限制。作用域链决定了变量在代码中的查找路径，而词法作用域则确保了函数在定义时所处的作用域是其词法作用域。变量提升和闭包是作用域中的两个重要概念，它们各自有着独特的用途和潜在的问题。通过掌握这些概念，你可以更好地控制变量的可访问性和生命周期，从而编写出更加健壮和可预测的 JavaScript 代码。

本文地址：https://www.tides.cn/p_js-scope