JS 作用域链拆解：变量查找的 “俄罗斯套娃” 规则

深入浅出JavaScript：作用域与作用域链的奇妙世界

✨ 引言：你真的了解JavaScript的"地盘"规则吗？

各位前端的小伙伴们，大家好！在JavaScript的奇妙世界里，我们每天都在和各种变量、函数打交道。但你有没有想过，这些变量和函数，它们究竟"住"在哪里？它们之间又是如何互相"串门"的呢？今天，我们就来聊聊JavaScript中两个非常核心且面试常考的概念------作用域（Scope）和作用域链（Scope Chain）。别看它们名字听起来有点"高大上"，其实理解起来就像我们生活中的"地盘"和"寻宝图"一样有趣！

在前端面试中，作用域和作用域链几乎是必考题。它们不仅是理解闭包、this指向等高级概念的基础，更是写出健壮、可维护代码的关键。所以，系好安全带，让我们一起踏上这场揭秘JavaScript"地盘"规则的旅程吧！

🔍 作用域：变量的"活动范围"

想象一下，你家里有一个客厅、一个卧室，还有一些公共区域。你在客厅里放的东西，客厅里的人都能看到；你在卧室里放的东西，只有卧室里的人才能看到。这就是"作用域"最直观的理解！

在JavaScript中，**作用域（Scope）**就是变量、函数和对象可访问的"集合"或者说"活动范围"。它决定了你代码中的哪些部分可以访问某个特定的变量或函数。简单来说，就是"地盘"规则。

🏡 作用域的"地盘"分类

JavaScript的作用域主要分为以下几种"地盘"：

🌍 1. 全局作用域（Global Scope）

全局作用域就像我们小区的公共广场，任何人都可以去，任何人在那里放的东西（变量）大家都能看到、都能用。在JavaScript中，那些定义在所有函数之外的变量，就拥有全局作用域。它们在整个程序中都是可访问的。

举个例子：

javascript 复制代码

var globalVariable = "我是公共广场上的大喇叭，全小区都能听到！";

function sayHello() {
    console.log(globalVariable); // 在函数内部也能访问到
}

sayHello(); // 输出：我是公共广场上的大喇叭，全小区都能听到！
console.log(globalVariable); // 在函数外部也能访问到

🏠 2. 函数作用域（Function Scope / Local Scope）

函数作用域就像你家的卧室，你在卧室里放的东西（变量），只有你卧室里的人（函数内部的代码）才能看到和使用，外面的人是看不到的。这种作用域也叫做局部作用域。

举个例子：

javascript 复制代码

function myRoom() {
    var privateDiary = "这是我的秘密日记，只有我自己能看！";
    console.log(privateDiary);
}

myRoom(); // 输出：这是我的秘密日记，只有我自己能看！
// console.log(privateDiary); // 报错：privateDiary is not defined，因为在卧室外面访问不到

🧱 3. 块级作用域（Block Scope）

块级作用域是ES6（ECMAScript 2015）引入的新概念，它就像你在家里搭了一个小帐篷，你在帐篷里放的东西，只有在帐篷里才能用。它主要通过let和const关键字来声明变量，使得变量的作用范围被限制在{}（代码块）内部，比如if语句、for循环或者简单的代码块。

举个例子：

javascript 复制代码

if (true) {
    let tentToy = "这是帐篷里的玩具，出了帐篷就收起来了！";
    const secretBase = "这是我的秘密基地，谁也别想进来！";
    console.log(tentToy);
    console.log(secretBase);
}

// console.log(tentToy); // 报错：tentToy is not defined，出了帐篷就访问不到了
// console.log(secretBase); // 报错：secretBase is not defined，出了帐篷也访问不到了

小结： 在ES6之前，JavaScript只有全局作用域和函数作用域。var声明的变量没有块级作用域，这在某些情况下会导致一些意想不到的问题（比如变量提升和循环变量问题）。let和const的出现，让JavaScript的作用域管理更加灵活和严谨。

🛠️ 代码示例：作用域的实际演练

让我们结合图片中的代码示例，来进一步理解不同作用域的变量是如何被访问的。

javascript 复制代码

function A() {
    var a = "a函数变量";
    
    function B() {
        var b = "b函数变量";
        console.log(a); // 可以访问到外部函数A的变量a
    }
    B();
    // console.log(b); // 报错：b is not defined，在函数B外部无法访问到b
}

var c = "全局变量";
A();
console.log(c); // 可以访问到全局变量c

代码解析：

var c = "全局变量";：c是在所有函数外部定义的，所以它是一个全局变量，拥有全局作用域，在代码的任何地方都可以访问到。
function A() { ... }：函数A内部定义了一个变量a。a是函数A的局部变量，只在函数A的作用域内可访问。
function B() { ... }：函数B定义在函数A内部，它内部定义了一个变量b。b是函数B的局部变量，只在函数B的作用域内可访问。
在函数B中，我们尝试console.log(a)，发现可以成功访问到变量a。这是因为函数B嵌套在函数A内部，函数B的作用域可以访问到其外部（父级）函数A的作用域。
如果我们在函数A的外部尝试访问b，或者在全局作用域中尝试访问a或b，都会因为它们不在当前作用域内而报错。

这个例子很好地展示了作用域的层级关系：内部作用域可以访问外部作用域的变量，而外部作用域无法访问内部作用域的变量。这就像你可以在卧室里看到客厅，但客厅里的人看不到你卧室里的东西一样。

⛓️ 作用域链：变量查找的"寻宝图"

理解了作用域，我们再来看看"作用域链"。如果说作用域是变量的"地盘"，那么作用域链就是一张"寻宝图"，它指引着JavaScript引擎在各个"地盘"之间寻找变量的路径。

当JavaScript在当前作用域中找不到某个变量时，它并不会立刻放弃，而是会沿着作用域链向上查找，直到找到该变量或者查找到全局作用域为止。如果最终在全局作用域也找不到，那就会报错。

🗺️ 作用域链的形成

作用域链是在函数定义的时候就确定了的。每个函数在定义时，都会保存一个对其父级作用域的引用，这个引用就构成了作用域链。它是一个由当前作用域与所有父级作用域组成的链条，最顶端是全局作用域。

让我们结合图片中的图解来理解这个过程：

🎨 图解一：a函数定义时

在a函数定义时，它的作用域链就已经确定了。它包含了a函数自身的作用域以及其父级作用域（这里是全局作用域）。你可以想象成，a函数出生的时候，就拿到了一个"寻宝图"，上面标明了它自己家（a函数作用域）和它爸爸家（全局作用域）的位置。

🏃 图解二：a函数执行时

当a函数被执行时，会创建一个a函数的执行上下文（Execution Context）。这个执行上下文会包含a函数的作用域，并且它的作用域链会指向a函数定义时确定的作用域链。此时，如果a函数内部需要查找变量，它会先在自己的作用域中找，找不到就沿着作用域链向上到全局作用域中找。

🚶 图解三：b函数执行时

当b函数被执行时（b函数嵌套在a函数内部），它也会创建一个b函数的执行上下文。b函数的执行上下文的作用域链会包含b函数自身的作用域、a函数的作用域，以及全局作用域。所以，b函数可以访问到b函数内部的变量，也可以访问到a函数内部的变量，还可以访问到全局变量。

总结一下：

作用域链就像一个层层嵌套的"俄罗斯套娃"，当你需要找一个东西（变量）时，会从最小的套娃（当前作用域）开始找，如果找不到，就打开这个套娃，去它外面那个套娃（父级作用域）里找，直到找到最外面的套娃（全局作用域）为止。如果还没找到，那就说明这个东西不存在。

❓ 执行上下文与作用域：傻傻分不清楚？

很多小伙伴可能会把"执行上下文"（Execution Context）和"作用域"（Scope）搞混，它们确实关系密切，但又有所不同。如果把作用域比作变量的"地盘"，那么执行上下文就是代码执行时的"现场"。

主要区别在于：

作用域 ：在代码编译阶段就确定了。它是一个静态的概念，指的是变量和函数在代码中定义时的可访问范围。就像你家的户型图，在你装修之前就已经画好了，哪里是客厅，哪里是卧室，一目了然。
执行上下文 ：在代码执行阶段 才产生。每当JavaScript代码执行时（比如调用一个函数），就会创建一个对应的执行上下文。它是一个动态的概念，包含了当前代码执行所需的所有信息，比如变量的值、this的指向等。就像你家里正在进行的派对，派对上的人（变量的值）、谁是主人（this指向）都是在派对开始后才确定的。

打个比方：

作用域就像一个公司的组织架构图，它规定了每个部门（作用域）的职责范围。而执行上下文就像公司里正在进行的某个项目会议，会议上会讨论具体的任务（变量的值），谁是项目负责人（this指向），这些都是在会议进行时才确定的。

总结来说：

作用域：管的是"地盘"和"规矩"，决定了变量在哪里可以被访问。
执行上下文：管的是"现场"和"状态"，决定了代码执行时的具体环境。

一个作用域下可能包含若干个执行上下文环境。比如一个函数定义好了，它的作用域就确定了，但只有当函数被调用时，才会生成对应的执行上下文。同一个执行上下文环境下，也可能涉及到多个作用域，比如内部函数的作用域。

🚀 总结：掌握作用域，写出更优雅的JavaScript代码

通过今天的学习，相信你对JavaScript中的作用域和作用域链有了更深入的理解。它们是JavaScript这门语言的基石，理解它们对于我们编写高质量、可维护的代码至关重要。

作用域：定义了变量和函数的可访问范围，是代码的"地盘"规则。
作用域链：是变量查找的"寻宝图"，指引着JavaScript引擎在不同作用域之间寻找变量的路径。
执行上下文：是代码执行时的"现场"，包含了代码执行所需的所有信息。

掌握了这些概念，你就能更好地理解变量的生命周期、避免变量污染、理解闭包的原理，并在面试中游刃有余。希望这篇博客能帮助你更好地理解这些看似复杂但实则有趣的JavaScript核心概念！

如果你觉得这篇文章对你有帮助，欢迎点赞、评论、分享，也欢迎关注我，一起探索更多前端的奥秘！