前端 javascript 编程闭包的知识点都有哪些

闭包（Closure）在JavaScript中是一个重要而强大的概念。闭包是函数和声明该函数的词法环境的组合、它允许一个函数在其外部作用域访问变量、是实现私有化和封装的关键机制。具体来说，闭包由三个部分组成：外部函数、内部函数以及外部函数中声明的变量或对象。内部函数通常会引用外部函数的变量，当外部函数被执行后，即使外部函数的执行上下文已经销毁，这些变量依然能够被内部函数所访问，这就是闭包的强大之处。

接下来，我们将逐一探索闭包的各个知识点。

一、闭包的创建和使用

闭包通常在一个函数内部创建另一个函数时形成。简单而言，当一个函数返回了另一个函数，这个被返回的函数就会携带着它被创建时的作用域链，这样即便外部函数执行完成后，返回的函数也可以访问外部函数中的变量。

创建闭包示例

让我们通过一个例子来了解闭包的创建。假设有一个外部函数 createCounter，它内部定义了一个变量 count 和一个内部函数 increment，内部函数 increment 可以访问 count 变量，并且每次被调用时，count 变量的值都会增加。尽管 createCounter 函数执行完毕后其执行上下文被销毁，但由于 increment 函数形成了闭包，它依然可以访问 count 变量。

闭包的用途

闭包不仅可以维护私有变量的状态，更多的时候，它被用来创建封装好的模块或者函数库。闭包可以控制变量的读取和修改操作，提供类似于私有变量的功能。

二、闭包的特性

闭包的几个显著特性包括：

维护内部状态：闭包可以让你从外部访问到内部函数中的变量，但这些变量在外部是无法直接修改的，它们通过闭包形成了一个独立的作用域。
记忆能力：闭包能记住并访问其创建时所在的词法作用域，即便是在外部函数已经执行完毕之后。
封装性：闭包的使用可以使得某些数据和方法只能通过指定的途径来访问，从而实现了封装和抽象的能力。

每个闭包绑定了它自己的词法环境，相当于每个闭包都有自己的私有变量，即使创建了多个相同的闭包，它们的环境也是相互独立的。

维护内部状态

当我们使用闭包封装一个计数器或类似的数据结构时，闭包内的状态在连续的操作中将被保持和更新，而外界则无法直接更改这些状态。这是因为闭包中的内部变量对外部来说是不可见的，只能通过闭包提供的函数来间接地进行操作。

封装性

封装性是面向对象编程的一个重要原则，闭包提供了一种在JavaScript中实现封装的机制。通过闭包，我们可以隐藏对象的细节，仅暴露必要的操作接口。这样可以减少外部对内部状态的不恰当访问，提高模块的安全性。

三、闭包的应用场景

闭包在JavaScript编程中有着广泛的应用。下面是一些常见的应用场景：

模拟私有变量：JavaScript原生并不支持私有变量，但我们可以使用闭包来创建可以访问私有数据的公有方法。
回调函数中的状态保持：当闭包作为回调函数使用时，可以让我们在异步操作完成后仍能访问到异步操作开始前的状态。
IIFE模式：立即执行函数表达式（Immediately Invoked Function Expression）是一种常见的JavaScript模式，通过使用闭包，可以在全局作用域中运行函数，同时不污染全局命名空间。

模拟私有变量

看看下面的代码，我们通过闭包实现了一个带有私有数据和公有方法的简单对象：

function createPerson() {
    var name = "Alice"; // 私有变量
    return {
        getName: function() { // 公有方法
            return name;
        },
        setName: function(newName) {
            name = newName;
        }
    };
}
var person = createPerson();
console.log(person.getName()); // 访问私有变量 name
person.setName("Bob");
console.log(person.getName()); // 私有变量 name 被更改

回调函数中的状态保持

闭包在异步编程中尤为重要，因为它们能够保存回调函数的状态信息。以事件监听为例：

function attachEvent(element, type, callback) {
    var data = 'important data';
    element.addEventListener(type, function(event) {
        console.log(data); // 使用闭包，即使在事件发生时，也能访问到变量 data
        callback(event);
    });
}