JS面试题 作用域深度解析与实战指南

一、JavaScript 作用域的核心概念

在JavaScript面试中，js面试题 作用域几乎是必问的基础知识点。理解作用域不仅是写出正确代码的前提，更是理解JavaScript执行机制的基石。作用域（Scope）定义了变量和函数的可访问范围。简单来说，它决定了“在哪里可以找到变量”。

1.1 词法作用域（Lexical Scoping）

JavaScript使用的是词法作用域，这意味着函数的作用域在函数定义的时候就决定了，而不是在函数调用的时候。这与动态作用域（如Bash脚本）截然不同。

// 示例：词法作用域
var a = 10;
function foo() {
    var b = 20;
    function bar() {
        console.log(a); // 10，访问全局变量
        console.log(b); // 20，访问外层函数变量
    }
    bar();
}
function baz() {
    var a = 30;
    bar(); // 报错 ReferenceError: bar is not defined
           // 因为bar定义在foo内部，词法上只能被foo访问
}

二、作用域链与执行上下文

理解js面试题 作用域必须结合执行上下文（Execution Context）。当代码执行时，会创建一个执行上下文栈（ECS），每个上下文都关联着一个变量对象（VO）或活动对象（AO）。

2.1 变量提升（Hoisting）

在ES5及之前，var声明的变量会发生提升。这意味着变量声明会被移动到当前作用域的顶部，但赋值不会。

// 变量提升示例
console.log(a); // undefined，而不是报错
var a = 10;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

三、闭包：高级面试题的核心

闭包（Closure）是js面试题 作用域相关最常被问到的难点。闭包是指有权访问另一个函数作用域中变量的函数。通常，当一个函数返回另一个函数时，就形成了闭包。

3.1 闭包的本质

闭包的存在使得外部函数执行完毕后，其内部的局部变量依然保存在内存中，不会被垃圾回收机制回收。这既带来了优势，也带来了潜在的性能问题。

// 经典闭包面试题
function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

四、ES6 块级作用域与 let/const

ES6 引入了 let 和 const，引入了块级作用域（Block Scope），即花括号 {} 内的作用域。这是现代JavaScript开发的标准实践。

4.1 块级作用域的优势

• 防止变量污染： 变量仅在定义的块内有效，退出块后即被销毁。
• 避免循环变量泄漏： 在 for 循环中使用 let，每次迭代都会创建一个新的词法环境。
• 暂时性死区（TDZ）： 在变量声明之前访问变量会抛出错误，有助于发现代码逻辑错误。

// for循环中的经典陷阱
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1);
}
// 输出: 3, 3, 3 (var 是函数作用域，共享同一个 i)
for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log(j), 1);
}
// 输出: 0, 1, 2 (let 是块级作用域，每次迭代 j 都是新的)

五、高频 JS 面试题 作用域 真题解析

以下是基于真实面试场景整理的js面试题 作用域相关题目，附带深度解析。

for (var i = 1; i <= 3; i++) {
    setTimeout(() => {
        console.log(i);
    }, 0);
    console.log(i);
}

function createIncrementer() {
    let count = 0;
    return function() {
        return ++count;
    };
}
const inc = createIncrementer();
console.log(inc()); // 1
console.log(inc()); // 2