JavaScript 闭包与作用域深度解析

作用域链

let globalVar = "global";

function outer() {
    let outerVar = "outer";
    
    function inner() {
        let innerVar = "inner";
        console.log(globalVar, outerVar, innerVar);
    }
    
    inner();
}

outer(); // global outer inner

闭包本质

闭包 = 函数 + 函数创建时的词法环境

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

经典陷阱：循环中的闭包

// ❌ 错误写法
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// 输出：3 3 3

// ✅ 正确写法 1：使用 let
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// 输出：0 1 2

// ✅ 正确写法 2：IIFE
for (var i = 0; i < 3; i++) {
    ((j) => {
        setTimeout(() => console.log(j), 100);
    })(i);
}

实际应用场景

1. 数据私有化

function createPrivateData() {
    let secret = "hidden";
    return {
        getSecret: () => secret,
        setSecret: (val) => { secret = val; }
    };
}

2. 函数柯里化

const add = (a) => (b) => a + b;
const add5 = add(5);
console.log(add5(3)); // 8

3. 防抖节流

function debounce(fn, delay) {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}

理解闭包是掌握 JavaScript 的关键，它支撑着许多高级编程模式。