编辑“︁JavaScript作用域”︁

= JavaScript作用域 =

'''作用域（Scope）'''是JavaScript中一个核心概念，它决定了变量、函数和对象的可访问性。理解作用域对于编写高效、可维护的代码至关重要。本文将详细介绍JavaScript中的作用域类型、工作原理以及实际应用。

== 什么是作用域？ ==
作用域是指程序中变量、函数和对象的可见范围。JavaScript中的作用域决定了在何处以及如何查找变量。作用域可以分为以下几种类型：

* '''全局作用域（Global Scope）'''：在任何地方都可以访问的变量。
* '''函数作用域（Function Scope）'''：在函数内部定义的变量，仅在该函数内可访问。
* '''块级作用域（Block Scope）'''（ES6引入）：在代码块（如<code>if</code>、<code>for</code>、<code>{ }</code>）内部定义的变量，仅在该块内可访问。

== 作用域的类型 ==

=== 1. 全局作用域 ===
全局作用域中定义的变量可以在代码的任何地方访问。在浏览器环境中，全局作用域是<code>window</code>对象。

<syntaxhighlight lang="javascript">
// 全局变量
var globalVar = "I am global";

function checkScope() {
    console.log(globalVar); // 输出: "I am global"
}

checkScope();
console.log(globalVar); // 输出: "I am global"
</syntaxhighlight>

=== 2. 函数作用域 ===
使用<code>var</code>声明的变量具有函数作用域，即它们仅在声明它们的函数内可见。

<syntaxhighlight lang="javascript">
function myFunction() {
    var functionVar = "I am inside a function";
    console.log(functionVar); // 输出: "I am inside a function"
}

myFunction();
console.log(functionVar); // 报错: functionVar is not defined
</syntaxhighlight>

=== 3. 块级作用域 ===
ES6引入了<code>let</code>和<code>const</code>，它们具有块级作用域，仅在声明它们的代码块内可见。

<syntaxhighlight lang="javascript">
if (true) {
    let blockVar = "I am inside a block";
    const blockConst = "I am also inside a block";
    console.log(blockVar); // 输出: "I am inside a block"
    console.log(blockConst); // 输出: "I am also inside a block"
}

console.log(blockVar); // 报错: blockVar is not defined
console.log(blockConst); // 报错: blockConst is not defined
</syntaxhighlight>

== 作用域链与变量查找 ==
JavaScript引擎通过'''作用域链（Scope Chain）'''来查找变量。当访问一个变量时，引擎会从当前作用域开始查找，如果找不到，则继续向外层作用域查找，直到全局作用域。如果仍未找到，则抛出错误。

<mermaid>
graph LR
    A[当前作用域] --> B[外层函数作用域]
    B --> C[全局作用域]
</mermaid>

示例：
<syntaxhighlight lang="javascript">
var globalVar = "Global";

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

    function innerFunction() {
        var innerVar = "Inner";
        console.log(innerVar); // 输出: "Inner"
        console.log(outerVar); // 输出: "Outer"
        console.log(globalVar); // 输出: "Global"
    }

    innerFunction();
}

outerFunction();
</syntaxhighlight>

== 实际应用案例 ==
=== 1. 避免全局污染 ===
使用函数作用域或块级作用域可以避免变量污染全局命名空间。

<syntaxhighlight lang="javascript">
(function() {
    var localVar = "I am local";
    console.log(localVar); // 输出: "I am local"
})();

console.log(localVar); // 报错: localVar is not defined
</syntaxhighlight>

=== 2. 闭包（Closure） ===
闭包是函数和其作用域的组合，允许函数访问其外部作用域的变量。

<syntaxhighlight lang="javascript">
function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter(); // 输出: 1
counter(); // 输出: 2
</syntaxhighlight>

== 常见问题与陷阱 ==
=== 1. 变量提升（Hoisting） ===
<code>var</code>声明的变量会提升到作用域顶部，但赋值不会提升。

<syntaxhighlight lang="javascript">
console.log(hoistedVar); // 输出: undefined
var hoistedVar = "I am hoisted";
</syntaxhighlight>

=== 2. 暂时性死区（Temporal Dead Zone） ===
<code>let</code>和<code>const</code>声明的变量在声明前不可访问。

<syntaxhighlight lang="javascript">
console.log(tdzVar); // 报错: Cannot access 'tdzVar' before initialization
let tdzVar = "I am in TDZ";
</syntaxhighlight>

== 总结 ==
* 作用域决定了变量的可访问性。
* 全局作用域的变量在任何地方都可访问。
* 函数作用域的变量仅在函数内可访问。
* 块级作用域的变量仅在代码块内可访问（<code>let</code>和<code>const</code>）。
* 作用域链决定了变量查找的顺序。
* 实际应用中，作用域可用于避免全局污染和实现闭包。

理解作用域是掌握JavaScript的关键一步，希望本文能帮助你更好地编写高效、可维护的代码！

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript基础]]