4个示例解释何为JS闭包及何时使用闭包

技术频道 - js技术

4个示例解释何为JS闭包及何时使用闭包

作者:admin 时间:2022-6-6 17:37:53 浏览:

闭包是一个访问其词法范围的函数，甚至在其词法范围之外执行。

更简单地说，闭包是一个函数，它从定义它的地方记住变量，而不管它后来在哪里执行。在本文中，将通过多个示例介绍什么是闭包，及何时使用闭包。

JavaScript 闭包

在开始认识闭包之前，你得首先了解嵌套函数。

在 JavaScript 中，一个函数可以有一个或多个内部函数。这些嵌套函数在外部函数的范围内。内部函数可以访问外部函数的变量和参数。但是，外部函数不能访问内部函数内部定义的变量。

示例：嵌套函数

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        alert(outerVariable);
    }

    InnerFunction();
}

在上面的例子中，InnerFunction() 可以访问 outerVariable 这个变量。

闭包的定义

现在，根据上面的定义，InnerFunction() 可以访问 outerVariable 变量，即使它会单独执行。参看以下示例。

function OuterFunction() {

    var outerVariable = 100;

    function InnerFunction() {
        alert(outerVariable);
    }

    return InnerFunction;
}
var innerFunc = OuterFunction();

innerFunc(); // 100

demo download

在上面的示例中，return InnerFunction; 当你调用 OuterFunction() 时，从 OuterFunction 返回 InnerFunction。变量innerFunc 仅引用 InnerFunction()，而不引用 OuterFunction()。所以现在，当你调用 innerFunc() 时，它仍然可以访问outerVariable在 OuterFunction() 中声明的内容，这称为闭包。

闭包：内部函数会更改外部变量的值

一个函数可以在 JavaScript 中返回另一个函数，分配给变量的函数称为函数表达式。

闭包的一个重要特征是外部变量可以在多次调用之间保持其状态。请记住，内部函数不会保留外部变量的单独副本，而是引用外部变量，这意味着外部变量的值将会改变，如果你使用内部函数更改它。示例：

function Counter() {
    var counter = 0;

    function IncreaseCounter() {
        return counter += 1;
    };

    return IncreaseCounter;
}

var counter = Counter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

demo download

在上面的例子中，外部函数Counter返回内部函数IncreaseCounter()的引用。increaseCounter 将外部变量 counter 增加到 1。所以多次调用内部函数会使计数器每次增加一个。

闭包：在多层内部函数中有效

闭包在多层内部函数中是有效的。示例：

function Counter() {
    
    var counter = 0;

    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        alert("counter = " + counter);

        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            alert("counter = " + counter + ", innerCounter = " + innerCounter)
        }, 500);

    }, 1000);
};

Counter();

demo download

根据闭包的定义，如果内部函数访问外部函数的变量，那么只有它被称为闭包。

不是闭包的示例：

var Counter = (function () {
        var i = 0;
        return { counter : i += 1 };
})();

何时使用闭包？

闭包对于隐藏 JavaScript 中的实现细节很有用。换句话说，创建私有变量或函数可能很有用。

以下示例显示了如何创建私有函数和变量：

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

alert(counter.value()); // 0
counter.increment();
counter.increment();
alert(counter.value()); // 2
counter.decrement();
alert(counter.value()); // 1