小白自学：js中的闭包

前言

作为一名前端小白，我今天get到了js中的一个重要的知识点，那就是闭包，让我们从新梳理一下闭包的概念、作用和用法吧

什么是闭包？

闭包是 JavaScript 中的一个重要概念，它允许函数访问其外部作用域中的变量。换句话说，闭包可以捕获并存储其外部作用域的状态，即使在其外部函数执行完毕后仍然可以访问这些变量。

闭包的工作原理

要理解闭包的工作原理，我们首先需要知道 JavaScript 中的作用域链。当一个函数被创建时，它会创建一个作用域链，其中包含了它能够访问的所有变量和函数。当函数需要访问一个变量时，它首先会在自己的作用域中查找，如果没有找到，则会向上级作用域继续查找，直到找到该变量或者到达全局作用域为止。

闭包的实现就是通过维持对外部变量的引用来实现的。当内部函数（闭包）访问外部函数中的变量时，JavaScript 引擎会确保这些变量的引用不会被垃圾回收，即使外部函数已经执行完毕，这样就形成了闭包。

闭包的应用场景

闭包在 JavaScript 中有许多实际的应用场景，其中最常见的是在事件处理函数和回调函数中使用。通过闭包，我们可以轻松地将数据和行为封装起来，使得代码更加模块化和灵活。

示例：

让我们来看一个简单的示例，演示闭包在 JavaScript 中的应用：

javascript 复制代码

function outerFunction() {
    var value = "abc"
}
console.log(value) // 外部无法访问内部变量

如果改成下面的样子：

javascript 复制代码

function outerFunction() {
    var outerVar = 'I am from outer function';

    function innerFunction() {
        console.log(outerVar); // 内部函数可以访问外部函数的变量
    }

    return innerFunction;
}

var closure = outerFunction();
closure(); // 输出 "I am from outer function"

在这个示例中，innerFunction 是一个闭包，它可以访问外部函数 outerFunction 中的变量 outerVar，即使 outerFunction 已经执行完毕。这是因为当outerFunction函数执行完成之后，存放代码执行的调用栈会将它清除，但是由于innerFunction函数里面有outerFuncion中需要的变量outerVar，所以就会形成一个类似于包裹的东西，将outerFunction保存下来，当后续代码执行时，就可以调用函数体内存有的变量，

闭包的一些常见应用方法

封装变量和函数：

闭包可以帮助我们封装变量和函数，以防止其被外部访问和修改。这种封装使得变量和函数成为私有的，只能在内部函数中访问，从而提高了代码的安全性和可维护性。

scss 复制代码

function createCounter() {
    let count = 0;

    function increment() {
        count++;
        console.log(count);
    }

    return increment;
}

let counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

在这个例子中，createCounter 函数返回了一个内部函数 increment。count 变量被封装在 createCounter 的作用域内，并且只能通过返回的 increment 函数来访问和修改。这样可以防止外部直接修改 count 变量，从而确保了其安全性。

实现模块化和私有化:

闭包可以帮助我们实现模块化的代码结构，并且实现一些私有变量和函数，避免了全局命名空间的污染。

javascript 复制代码

let module = (function() {
    let privateVar = 'I am a private variable';

    function privateFunction() {
        console.log('I am a private function');
    }

    return {
        publicVar: 'I am a public variable',
        publicFunction: function() {
            console.log('I am a public function');
            console.log(privateVar); // 内部函数可以访问私有变量
            privateFunction(); // 内部函数可以调用私有函数
        }
    };
})();

console.log(module.publicVar); // 输出 'I am a public variable'
module.publicFunction(); // 输出 'I am a public function' 和 'I am a private function'

在这个例子中，我们使用立即执行函数创建了一个模块，模块内部包含了一些私有变量和函数，以及一些公有的接口（publicVar 和 publicFunction）。只有公有接口可以被外部访问，而私有变量和函数则对外部是不可见的，从而实现了模块化和私有化的效果。

结语

希望通过本文的介绍，你对 JavaScript 中的闭包有了更清晰的理解。闭包是 JavaScript 中非常有用的功能之一，它可以帮助我们更好地组织和管理代码，同时也能够解决一些特定的问题。继续学习和实践，你会发现闭包的强大之处，并能够熟练地运用它们来编写更加优雅和高效的 JavaScript 代码。