JS 闭包面试考点全解析：原理、应用与陷阱

昨天 4895阅读

在 JavaScript 面试中，闭包是一个高频考点。理解闭包不仅能帮助你在面试中脱颖而出，还能让你在实际开发中编写出更高效、更灵活的代码。本文将深入探讨 JS 闭包的面试考点，包括闭包的定义、原理、常见应用场景以及容易遇到的陷阱。

闭包的定义与原理

定义

闭包是指有权访问另一个函数作用域中的变量的函数。简单来说，即使该函数已经执行完毕，其作用域内的变量也不会被销毁，而是会被闭包所引用。

原理

JavaScript 采用词法作用域，函数的作用域在定义时就已经确定，而不是在调用时确定。当一个函数内部定义了另一个函数时，内部函数会形成一个闭包，它可以访问外部函数的变量和参数。

下面是一个简单的闭包示例：

function outerFunction() {
    let outerVariable = 'I am from outer function';
    function innerFunction() {
        // 内部函数可以访问外部函数的变量
        console.log(outerVariable); 
    }
    return innerFunction;
}

let closure = outerFunction();
closure(); // 输出: I am from outer function

在这个例子中，innerFunction 形成了一个闭包，它可以访问 outerFunction 中的 outerVariable。即使 outerFunction 执行完毕，outerVariable 也不会被销毁，因为 innerFunction 仍然引用着它。

闭包的常见应用场景

实现私有变量和方法

闭包可以用来实现私有变量和方法，避免全局变量的污染。以下是一个简单的示例：

function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
console.log(counter.getCount()); // 输出: 0
counter.increment();
console.log(counter.getCount()); // 输出: 1
counter.decrement();
console.log(counter.getCount()); // 输出: 0

在这个例子中，count 是一个私有变量，外部无法直接访问，只能通过 increment、decrement 和 getCount 方法来操作。

函数柯里化

函数柯里化是指将一个多参数函数转换为一系列单参数函数的过程。闭包在函数柯里化中起着重要的作用。以下是一个简单的柯里化示例：

function add(a, b) {
    if (arguments.length === 2) {
        return a + b;
    } else {
        return function(b) {
            return a + b;
        };
    }
}

let add5 = add(5);
console.log(add5(3)); // 输出: 8

在这个例子中，add 函数可以接收一个或两个参数。当只传递一个参数时，它返回一个闭包，该闭包可以接收第二个参数并完成加法运算。

事件处理

在事件处理中，闭包可以用来保存一些状态信息。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="myButton">Click me</button>
    <script>
        let button = document.getElementById('myButton');
        let clickCount = 0;
        button.addEventListener('click', function() {
            clickCount++;
            console.log(`Button clicked ${clickCount} times`);
        });
    </script>
</body>
</html>

在这个例子中，事件处理函数形成了一个闭包，它可以访问外部的 clickCount 变量，每次点击按钮时都会更新该变量的值。

闭包容易遇到的陷阱

内存泄漏

由于闭包会引用外部函数的变量，这些变量不会被垃圾回收机制回收，因此如果使用不当，可能会导致内存泄漏。以下是一个可能导致内存泄漏的示例：

function createLargeArray() {
    let largeArray = new Array(1000000).fill(0);
    return function() {
        return largeArray.length;
    };
}

let closure = createLargeArray();
// 即使不再需要 largeArray，它也不会被回收

为了避免内存泄漏，当不再需要闭包时，应该手动释放闭包对外部变量的引用。

循环中的闭包问题

在循环中使用闭包时，可能会出现意外的结果。例如：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); 
    }, 100);
}

这段代码的预期输出应该是 0、1、2、3、4，但实际上会输出 5 五次。这是因为 var 声明的变量是全局作用域的，当定时器执行时，循环已经结束，i 的值已经变成了 5。

解决这个问题的方法是使用 let 声明变量，或者使用立即执行函数表达式（IIFE）：

// 使用 let 声明变量
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); 
    }, 100);
}

// 使用 IIFE
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j); 
        }, 100);
    })(i);
}