什么是JS的闭包和作用域？

let

const

if

for

ReferenceError

let globalVar = '我是全局变量';

function outerFunction() {
    let outerVar = '我是外部函数变量';

    function innerFunction() {
        let innerVar = '我是内部函数变量';
        console.log(innerVar); // 找到 innerVar
        console.log(outerVar); // 沿着作用域链找到 outerVar
        console.log(globalVar); // 沿着作用域链找到 globalVar
        // console.log(nonExistentVar); // 找不到，报错
    }
    innerFunction();
}
outerFunction();

innerFunction

innerFunction

outerFunction

innerFunction

outerVar

outerFunction

globalVar

function createCounter() {
    let count = 0; // 这个变量是“私有”的

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter1 = createCounter();
counter1.increment(); // 1
counter1.increment(); // 2
console.log(counter1.getCount()); // 2

const counter2 = createCounter(); // 独立的计数器实例
counter2.increment(); // 1

function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

var

const buttons = document.querySelectorAll('button');

// 错误示范 (使用 var)
// for (var i = 0; i < buttons.length; i++) {
//     buttons[i].addEventListener('click', function() {
//         console.log('你点击了按钮 ' + i); // 总是输出 buttons.length
//     });
// }

// 正确使用闭包 (通过 IIFE 或 let)
for (let i = 0; i < buttons.length; i++) { // let 在每次迭代都会创建一个新的块级作用域
    buttons[i].addEventListener('click', function() {
        console.log('你点击了按钮 ' + i); // 输出正确的索引
    });
}

let element;

function setup() {
    let largeData = new Array(1000000).join('x'); // 模拟大对象
    element = document.getElementById('myButton');

    element.addEventListener('click', function() {
        console.log(largeData.length); // 闭包引用了 largeData
    });
}

// 调用 setup() 后，即使 element 被移除，largeData 也可能因闭包的引用而无法被回收
// 如果 element 在后续操作中被置为 null，或其事件监听器被移除，情况会改善

var

var

i

// 经典陷阱：所有闭包都共享同一个 i
function createClickHandlers() {
    let handlers = [];
    for (var i = 0; i < 3; i++) {
        handlers.push(function() {
            console.log(i); // 总是输出 3
        });
    }
    return handlers;
}

let myHandlers = createClickHandlers();
myHandlers[0](); // 3
myHandlers[1](); // 3
myHandlers[2](); // 3

// 解决方案：使用 IIFE 立即捕获 i 的值
function createClickHandlersFixed() {
    let handlers = [];
    for (var i = 0; i < 3; i++) {
        (function(index) {
            handlers.push(function() {
                console.log(index); // 输出 0, 1, 2
            });
        })(i);
    }
    return handlers;
}

let myHandlersFixed = createClickHandlersFixed();
myHandlersFixed[0](); // 0
myHandlersFixed[1](); // 1
myHandlersFixed[2](); // 2

// 或者更现代、更推荐的方式：使用 let
function createClickHandlersLet() {
    let handlers = [];
    for (let i = 0; i < 3; i++) { // let 在每次迭代都创建一个新的 i
        handlers.push(function() {
            console.log(i); // 输出 0, 1, 2
        });
    }
    return handlers;
}

let myHandlersLet = createClickHandlersLet();
myHandlersLet[0](); // 0
myHandlersLet[1](); // 1
myHandlersLet[2](); // 2