JavaScript作用域相关的总结

这里主要记录在日常中对知识的学习，通过结合笔记与自身理解的方式尝试写下总结
文章对细节可能不会一一介绍解释，内容仅作参考

作用域指程序源代码中定义变量的区域，规定了如何查找变量即确定当前执行代码对变量的访问权限

JavaScript采用的是词法作用域，也就是函数的作用域在函数定义的时候就决定了
与词法作用域相反的是动态作用域，也就是函数的作用域是在函数调用的时候才决定，这里仅供了解就好

---

在JavaScript中主要有全局作用域、函数作用域、块级作用域（ES6之前没有）三个

• 全局作用域：顾名思义，是为最顶层最大的范围
• 函数作用域：仅在某个函数内部有效的范围
• 块级作用域：仅在某个块级代码内部有效的范围

---

作用域是一个很抽象的概念，可以理解成一个地盘，具有

• 独立性：作用域包裹起来让变量不会外泄，所以在不同作用域下同名变量不会有冲突 - 隔离变量
• 分层与嵌套：作用域是有层级关系的，上下级关系的确定就看函数是在哪个作用域下定义的（在哪个作用域下定义就是哪个作用域的子作用域）

内层作用域（子作用域）可以访问外层作用域（父作用域）的变量，反之则不行。在查找一个变量时，如果在本作用域内无定义，那么就会往上一层父作用域查找，一层一层向上直到全局作用域，这种方式就成为了作用域链

---

再强调一次：作用域是在相应代码定义时就被创建（例如定义函数时决定相对应的函数作用域）

---

举个栗子加深一下理解:

function foo() {
    var b = 2
    function bar(c) {
        var d = 3
        console.log(a, b, c, d)
    }
    bar(b * 3)
}
function hkk() {
    var e = 4
    console.log(a, e)
}
var a = 1

假设走到这段代码的时候，最外层作用域是全局作用域，目前的作用域层级为

[全局作用域]

定义foo函数，会有一个foo作用域产生

[全局作用域[foo作用域]]

然后走进foo里面，定义bar函数，会有一个bar作用域产生

[全局作用域 [foo作用域 [ bar作用域 ] ] ]

绕出来后，还定义了hkk函数，会有一个hkk作用域产生

[全局作用域 [foo作用域 [ bar作用域 ], hkk作用域]]

在接下来变量的查找就会依赖这个作用域链
比如说在上面代码会有

• bar -> foo -> 全局
• hkk -> 全局

在函数执行时变量的查找就会变成这样：

function foo() {
    var b = 2
    function bar(c) {
        var d = 3
        console.log(a, b, c, d)
        // a: 在bar这里找不到，去foo那里找找。foo也找不到呢，再上去全局找找。在全局找到了 -> 最后得出这个值要在全局作用域下拿到
        // b: 在bar这里找不到，去foo那里找找。在foo找到了 -> 最后得出这个值要在foo作用域下拿到
        // c: 在bar这里找到了 -> 最后得出这个值要在bar作用域下拿到
        // d: 在bar这里找到了 -> 最后得出这个值要在bar作用域下拿到
    }
    bar(b * 3)
}
function hkk() {
    var e = 4
    console.log(a, e)
    // a: 在hkk这里找不到，上去全局找找。在全局找到了 -> 最后得出这个值要在全局作用域下拿到
    // c: 在hkk这里找到了 -> 最后得出这个值要在hkk作用域下拿到
}
var a = 1

---

作用域是执行上下文知识的前置知识

可以想象成：
我要办一座学校（全局），会有多个年级（函数/块级作用域），然后呢每个年级里面又有多个班级（子函数/块级作用域），每个班级又会有跟细的组织结构

但是呢 我这里只是想好了怎么安排制度（某个班级考试时，如果班级自己没有试卷，那需要的试卷应该向对应的年级拿，年级没有，再去找学校要），但至于运行起来后，年级有多少试卷，是否还有作业，就要看年级私底下的安排了（这个这里先不去理解 看看就好）