【JavaScript】作用域

作用域是指在程序中定义变量的区域，决定了这些变量在哪里可以被访问和使用。JavaScript 中的作用域有全局作用域、函数作用域和块级作用域。

1. 什么是作用域？

作用域是代码中定义变量的区域，它决定了变量的可见性和生命周期。作用域规定了在程序中哪些部分可以访问某个变量，以及变量在哪些地方是可用的。

作用域最大的作用就是隔离变量。

2. 全局作用域和函数作用域

• 全局作用域：全局作用域是指在代码中任何地方都可以访问的作用域。在全局作用域中声明的变量拥有全局作用域，可以被代码中的任何地方访问。

let globalVar = 10;

function test() {
    console.log(globalVar); // 可以访问全局作用域中的变量
}

• 最外层函数和在最外层函数外面定义的变量拥有全局作用域
• 所有未定义直接赋值的变量自动声明为拥有全局作用域
• window 对象的所有属性拥有全局作用域

全局作用域很大的弊端就是全局污染。所以这就是为什么 jQuery 等库的源码，都会放在 立即执行函数 中。

• 函数作用域：函数作用域是指在函数内部声明的变量只能在该函数内部访问的作用域。函数外部无法访问函数内部声明的变量。

function test() {
    let localVar = 20;
    console.log(localVar); // 可以访问函数作用域中的变量
}

console.log(localVar); // 报错，无法访问函数作用域中的变量

值得注意的是:块语句(大括号" {) "中间的语句) ,如if和switch条件语句或for和while循环语句,不像函数,它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。

3. 块级作用域

在 ES6 中引入了块级作用域，使用 let 和 const 关键字声明的变量具有块级作用域。块级作用域指的是在代码块（如 if、for、while、{} 等）内部声明的变量只在该代码块内部可见。

if (true) {
    let blockVar = 30;
    console.log(blockVar); // 可以访问块级作用域中的变量
}

console.log(blockVar); // 报错，无法访问块级作用域中的变量

作用域链

作用域链是一种链式结构，用于查找和解析变量标识符。

1. 什么是自由变量？

自由变量是指在当前函数作用域中未声明但被引用（使用）的变量。

当 JavaScript 引擎在当前作用域中找不到某个变量时，它会沿着作用域链向上查找，直到找到该变量为止。如果在全局作用域中也找不到该变量，那么该变量就是一个自由变量。

let globalVar = 'Global Variable';

function outerFunction() {
    let outerVar = 'Outer Variable';

    function innerFunction() {
        console.log(outerVar); // Outer Variable 是一个自由变量
        console.log(globalVar); // globalVar 是一个自由变量
    }

    innerFunction();
}

outerFunction();

在上面的例子中，innerFunction 内部引用了 outerVar 和 globalVar，但在该函数作用域中都没有声明这两个变量，因此它们都是自由变量。

2. 什么是作用域链？

作用域链是 JavaScript 中一种动态的数据结构，用于解析标识符引用。当 JavaScript 引擎遇到变量引用时，它会沿着作用域链向上查找，直到找到对应的变量或者到达全局作用域为止。作用域链是由当前执行环境的变量对象和所有外部环境的变量对象组成的链式结构。

3. 关于自由变量的取值

当 JavaScript 引擎在当前作用域中找不到某个变量时，它会沿着作用域链向上查找。如果在作用域链的某个环境中找到了对应的变量，则使用该变量的值；如果在作用域链的顶端（全局作用域）仍然找不到对应的变量，则会抛出 ReferenceError 错误。

向上级（或者说父级）找这种说法是不太准确的。

let x = 10
function fn() {
    console.log(x)
}
function show(f) {
    let x = 20
    ;(function () {
        f()  // 10 而不是 20
    })()
}
show(fn)

取自由变量的值要在创建 fn 的函数那个作用域中去取，无论 fn 在哪里调用。

这就是所谓的“静态作用域”。作用域中的值在函数创建的时候，就已经被存储了，是静态的。

作用域与执行上下文

JavaScript属于解释性语言，JavaScript 的执行分为两个阶段：解释和执行。

解释阶段：

• 词法分析
• 语法分析
• 作用域规则确定

执行阶段：

• 创建执行上下文
• 执行函数代码
• 垃圾回收

执行上下文在运行时确定，随时可能改变，作用域在定义时就确定，并且不会改变。

【JavaScript】作用域
原文链接：https://juejin.cn/post/7365933616743006217