JS 作用域与闭包之从变量提升到闭包陷阱的超详细解析

for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // 期望输出 0, 1, 2，实际输出 3, 3, 3
    }, 100);
}

// module-a.js
var count = 10;
// module-b.js
var count = 20; // 覆盖了 module-a 的 count！
console.log(count); // 20

function createCounter() {
    let count = 0;
    let largeData = new Array(1000000).fill('x'); // 模拟大数据
    return {
        increment: () => ++count,
        getCount: () => count
        // largeData 未被引用，但无法被垃圾回收！
    };
}
const counter = createCounter();

console.log(a); // undefined（不是报错！）
var a = 10;

var a;          // 声明提升
console.log(a); // undefined
a = 10;         // 赋值留在原地

// 函数声明 - 可以正常调用
foo(); // "hello"
function foo() {
    console.log("hello");
}
// 函数表达式（var）- 报错：foo is not a function
bar(); // TypeError: bar is not a function
var bar = function() {
    console.log("world");
};
// 函数表达式（let）- 报错：Cannot access 'baz' before initialization
baz(); // ReferenceError
let baz = function() {
    console.log("!");
};

function test() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10，var 穿透了 if 块
}
test();

function test() {
    if (true) {
        let y = 10;
        const z = 20;
    }
    console.log(y); // ReferenceError: y is not defined
    console.log(z); // ReferenceError: z is not defined
}
test();

const globalVar = 'global';
function outer() {
    const outerVar = 'outer';
    function inner() {
        const innerVar = 'inner';
        console.log(globalVar); // "global" - 沿作用域链找到全局
        console.log(outerVar);  // "outer" - 沿作用域链找到外层
        console.log(innerVar);  // "inner" - 当前作用域找到
    }
    inner();
}
outer();

const x = 'global';
function foo() {
    const x = 'local';
    function bar() {
        // 优先使用当前作用域，没有则向外查找
        console.log(x); // "local"（不是 "global"！）
    }
    bar();
}
foo();

function outer() {
    const secret = 'I am hidden';
    return function inner() {
        return secret; // inner 引用了 outer 的变量
    };
}
const getSecret = outer();
console.log(getSecret()); // "I am hidden"

const counterModule = (function() {
    let count = 0; // 私有变量
    return {
        increment() {
            return ++count;
        },
        decrement() {
            return --count;
        },
        getValue() {
            return count;
        }
    };
})();
console.log(counterModule.getValue()); // 0
counterModule.increment();
console.log(counterModule.getValue()); // 1
// count 无法从外部直接访问

function multiply(a) {
    return function(b) {
        return function(c) {
            return a * b * c;
        };
    };
}
const double = multiply(2);
const triple = multiply(3);
console.log(double(5)(4)); // 40
console.log(triple(2)(2)); // 12

function createMemoizedFibonacci() {
    const cache = {}; // 闭包缓存
    function fib(n) {
        if (n <= 1) return n;
        if (cache[n]) return cache[n];
        cache[n] = fib(n - 1) + fib(n - 2);
        return cache[n];
    }
    return fib;
}
const fib = createMemoizedFibonacci();
console.log(fib(40)); // 快速计算，因为缓存了中间结果

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

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

for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // 0, 1, 2
    }, 100);
}

const obj = {
    name: 'Alice',
    friends: ['Bob', 'Charlie'],
    showFriends() {
        this.friends.forEach(function(friend) {
            console.log(this.name + ' knows ' + friend); 
            // this.name 是 undefined！
        });
    }
};

obj.showFriends();

const obj = {
    name: 'Alice',
    friends: ['Bob', 'Charlie'],
    showFriends() {
        // 方案一：使用箭头函数（继承外层 this）
        this.friends.forEach(friend => {
            console.log(this.name + ' knows ' + friend);
        });
        // 方案二：使用闭包保存 this
        const self = this;
        this.friends.forEach(function(friend) {
            console.log(self.name + ' knows ' + friend);
        });
    }
};

function createHeavyClosure() {
    const largeArray = new Array(1000000).fill('data');
    const smallValue = 42;
    return function() {
        return smallValue; // 只使用了 smallValue
    };
}
const leak = createHeavyClosure();
// largeArray 永远不会被释放！

function createLightClosure() {
    const smallValue = 42;
    return function() {
        return smallValue;
    };
    // largeArray 在函数执行完毕后自然释放
}
// 或者在使用完毕后手动解除引用
leak = null; // 允许垃圾回收

function outer() {
    const x = 10;
    return function inner() {
        console.log(x);
    };
}
const fn = outer();
console.dir(fn); 
// 在控制台展开 [[Scopes]] 可查看闭包捕获的变量