JavaScript 作用域与作用域链核心机制详解

JavaScript作用域与作用域链核心机制详解

作用域与作用域链是JavaScript中的核心概念，也是面试中高频考察的知识点。理解这两者的本质对于掌握JS运行机制至关重要，接下来我们将详细拆解它们的具体含义与应用。

全局与局部作用域基础

首先通过一段示例代码来引入话题：

var a = 'jack';
function fn() {
    var a = 'frank';
}
console.log(a);

假设在函数内部定义了一个变量a，同时在函数外部也定义了一个同名的变量a，此时控制台输出的a值究竟取自哪里？

这就引出了“作用域”的概念。简而言之，作用域决定了变量有效的代码区域，即限制变量只能在特定的范围内被访问。

作用域主要分为全局作用域和局部作用域。在上述示例中，函数外定义的a属于全局变量，拥有全局作用域；函数内定义的a属于局部变量，拥有局部作用域。由于示例中的console.log语句在全局环境中执行，因此毫无疑问会输出全局变量a的值，即'jack'。

ES5中块级作用域的变量泄漏问题

接下来，我们将函数代码块替换为if语句块，观察最终的输出结果会有什么变化。

var a = 'jack';
if(true) {
    var a = 'frank';
}
console.log(a);

最终输出的a值为'frank'。

这里存在一个常见的误区：不要认为大括号{}就构成了封闭的作用域。在ES5及之前的JavaScript中，if语句块内的代码执行完毕后虽然逻辑结束，但其中使用var声明的变量并不会被销毁，而是提升并绑定到当前最外层执行环境（即全局环境）。因此，if内部定义的a实际上变成了全局变量。

再来看下面这段代码，分析其输出结果：

for(var i = 0;i<3;i++) {
    break;
}
console.log(i);
k = 5;
while(k>1) {
    k--;
    var d = 10;
}
console.log(k);
console.log(d);

除了if语句块，常见的for循环和while循环也遵循类似的规则。不要被代码块的大括号迷惑，在循环内部使用var定义的变量并不具备局部作用域特性，而是会泄漏到全局。因此，变量i、k和d最终都是全局变量。具体输出结果如下：

ES6块级作用域与变量声明差异

结合ES6新增的块级作用域特性，对上述内容进行总结：

• 在ES6中，如果大括号{}不与函数定义结合，则形成“块级作用域”。
• 在块级作用域内部，使用var声明的变量会提升为全局变量（或外层作用域变量），而使用let声明的变量则严格限制在块级作用域内，成为局部变量。
• 而在局部作用域（即函数作用域）中，无论使用var还是let声明的变量，都仅在当前函数内部有效，属于局部变量。
• 无论是在块级作用域还是函数作用域中，如果声明变量时省略了var或let关键字，该变量都会直接挂载到全局对象上，成为全局变量。

作用域链的查找规则与机制

回到之前的示例，这次我们增加了全局变量b，并在函数内部添加了两个console.log输出语句。最后调用该函数，但函数内部并未定义变量b，此时会输出什么结果？

var a = 'jack';
var b = 'andy';
function fn() {
    var a = 'frank';
    console.log(a);
    console.log(b);
}
fn();
console.log(a);

输出结果如下：

为什么第二个console.log会输出全局变量andy的值？

这里引入了“作用域链”的概念。简单来说，作用域定义了变量的可见范围（区域），而作用域链则定义了变量查找的顺序（次序）。

将目光聚焦在函数fn内部。第一行定义了局部变量a，第二行输出该变量。由于整个代码中存在多个名为a的变量，此时就需要作用域链来决定优先使用哪个变量。

JavaScript引擎在执行时，会先在当前函数内部查找变量a。如果找不到，则沿着作用域链向外层（父级）环境查找，直到找到全局环境。作用域链确保了这种查找次序的有序性。

因此，函数内部定义了变量a为'frank'，第二行输出'frank'。第三行要输出变量b，引擎先在函数内部查找，未找到，于是沿作用域链向上查找，在全局环境中找到了变量b，于是输出该值。最后看最后一个console.log(a)，由于它在全局范围内执行，只能访问全局变量a。

总结来说：作用域链的查找方向只能向上，最终到达全局环境。它不支持同级（局部）查找，也不支持向下查找。

变量提升与函数优先提升特性

再看下面这段代码：

var a = 'jack';
function fn() {
    console.log(a);
    var a = 'andy';
    console.log(a);
}
fn();

思考一下，这段代码会输出什么？

输出结果如下：

具备一定JS经验的同学应该能答对，原因在于“变量提升”。变量a在第一行已经被声明，只是尚未赋值。现在修改代码，再次观察输出：

var a = 'jack';
function fn() {
    console.log(a);
    var a = 'andy';
    console.log(ss());
    function ss() {
        return a;
    }
}
fn();

我们在fn函数内部又定义了一个函数ss，并在该函数顶部调用了它。不仅函数内声明的变量会被提升，函数内的函数声明也会被提升，且函数声明的提升优先级高于变量声明。

因此，在JavaScript引擎中，这段代码的实际执行顺序如下：

var a = 'jack';
function fn() {
    function ss() {
        return a;
    }
    var a;
    console.log(a);
    a = 'andy';
    console.log(ss());
}
fn();

首先将函数声明ss提升到首行，接着声明变量a，然后执行console.log(a)，此时a未被赋值，故输出undefined。随后a被赋值为'andy'，最后调用函数ss，返回值为'andy'。

本文关于JavaScript作用域与作用域链的重点讲解到此结束。如需了解更多相关知识点，请搜索本站历史文章或继续浏览后续内容，感谢支持！