编辑“︁JavaScript作用域链”︁

= JavaScript作用域链 =

== 介绍 ==  
'''作用域链'''（Scope Chain）是JavaScript中理解变量和函数访问权限的核心机制之一。它定义了代码在查找变量时的层级顺序，由当前作用域及其所有外层作用域组成。当JavaScript引擎在当前作用域中找不到某个变量时，会沿着作用域链逐层向上查找，直到全局作用域（或抛出错误）。理解作用域链是掌握闭包、变量提升等高级概念的基础。

== 作用域链的组成 ==  
JavaScript的作用域链由以下部分组成：  
1. '''当前执行上下文的变量对象'''（Variable Object，VO）：存储当前作用域中定义的变量、函数和参数。  
2. '''外层作用域的变量对象'''：形成链式结构，直到全局作用域。  

作用域链的顶端始终是全局对象（浏览器中为<code>window</code>，Node.js中为<code>global</code>）。

== 作用域链的创建过程 ==  
当函数被调用时，JavaScript引擎会执行以下步骤：  
1. 创建函数的执行上下文（Execution Context）。  
2. 构建作用域链：复制函数的<code>[[Scope]]</code>属性（定义时确定），并将当前变量对象添加到链首。  

=== 示例：作用域链的层级 ===  
<syntaxhighlight lang="javascript">  
function outer() {  
    const outerVar = '外层变量';  

    function inner() {  
        const innerVar = '内层变量';  
        console.log(innerVar);   // 访问当前作用域  
        console.log(outerVar);   // 访问外层作用域  
    }  

    inner();  
}  

outer();  
</syntaxhighlight>  

'''输出：'''  
<pre>  
内层变量  
外层变量  
</pre>  

'''解释：'''  
- <code>inner()</code>的作用域链包含：<code>inner的VO → outer的VO → 全局VO</code>。  
- 当访问<code>outerVar</code>时，引擎先在<code>inner的VO</code>中查找，未找到后继续向上搜索。

== 作用域链与闭包 ==  
闭包（Closure）是函数与其定义时的作用域链的结合。即使外层函数执行完毕，闭包仍能访问其作用域链中的变量。  

=== 实际案例：计数器 ===  
<syntaxhighlight lang="javascript">  
function createCounter() {  
    let count = 0;  

    return function() {  
        count++;  
        return count;  
    };  
}  

const counter = createCounter();  
console.log(counter()); // 1  
console.log(counter()); // 2  
</syntaxhighlight>  

'''解释：'''  
- <code>createCounter</code>返回的函数保留了对其作用域链（包含<code>count</code>）的引用，形成闭包。  

== 作用域链的可视化 ==  
使用Mermaid绘制作用域链的层级关系：  
<mermaid>  
graph TD  
    A[inner的VO] --> B[outer的VO]  
    B --> C[全局VO]  
</mermaid>  

== 作用域链与性能优化 ==  
过度依赖作用域链的深层查找（如全局变量）会降低性能。建议：  
1. 尽量使用局部变量。  
2. 避免在循环中频繁访问外层作用域的变量。  

=== 反例：低效的作用域链查找 ===  
<syntaxhighlight lang="javascript">  
function sumArray(arr) {  
    let sum = 0;  
    for (let i = 0; i < arr.length; i++) {  
        sum += arr[i]; // 每次循环都从全局作用域查找Array.prototype.length  
    }  
    return sum;  
}  
</syntaxhighlight>  

'''优化方案：'''缓存外层变量。  
<syntaxhighlight lang="javascript">  
function sumArray(arr) {  
    let sum = 0;  
    const len = arr.length; // 缓存到局部作用域  
    for (let i = 0; i < len; i++) {  
        sum += arr[i];  
    }  
    return sum;  
}  
</syntaxhighlight>  

== 常见误区 ==  
1. '''块级作用域 vs 函数作用域'''：ES6的<code>let/const</code>会创建块级作用域，但作用域链的机制不变。  
2. '''动态修改作用域链'''：<code>with</code>和<code>eval</code>可能破坏作用域链，应避免使用。  

== 总结 ==  
- 作用域链是JavaScript查找变量的规则链。  
- 闭包通过保留作用域链实现对外层变量的访问。  
- 合理利用作用域链能提升代码性能与可维护性。  

== 延伸阅读 ==  
* [[JavaScript闭包]]  
* [[JavaScript执行上下文]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript作用域与闭包]]