JavaScript 闭包总结

引入

闭包(Closure) 是JavaScript中的一个重要概念。它被广泛讨论，但仍然是一个混淆的概念。让我们来理解闭包是什么。
首先，让我们看看Douglas Crockford给出的闭包的定义:Closure

闭包意味着内部函数始终可以访问外部函数的变量和参数，即使外部函数已经返回。

我们可以在 JavaScript 中创建嵌套函数。内部函数可以访问外部函数的变量和参数(但是，不能访问外部函数的参数对象arguments)。

看看下面这个例子:

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        console.log(outerVariable);
    }

    InnerFunction();  // 1
}

InnerFunction() 可以访问 outerVariable

闭包特性 1：

function OuterFunction() {

   var outerVariable = 100;

   function InnerFunction() {
       alert(outerVariable);
   }

   return InnerFunction;
}
var innerFunc = OuterFunction();

innerFunc(); // 100

在上面的例子, 当调用 OuterFunction() 时，从 OuterFunction 返回InnerFunction 函数。变量 innerFunc 只引用InnerFunction()，而不是OuterFunction()。现在，当你调用 innerFunc() 时，它仍然可以访问在 OuterFunction() 中声明的 outerVariable。这就是闭包。

闭包特性 2

function Counter() {
    var counter = 0;

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

    return IncreaseCounter;
}

var counter = Counter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

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

在上面的例子中，外部函数 Counter 返回内部函数 IncreaseCounter。增加 IncreaseCounter 将外部变量 counter 加1。因此多次调用 IncreaseCounter 函数将使 counter 多次加1。

闭包特性 3

function Counter() {
    
    var counter = 0;

    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        console.log("counter = " + counter);

        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            console.log("counter = ", counter)
            console.log("innerCounter = ", innerCounter)
        }, 500);

    }, 1000);
};

Counter();

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

什么时候使用闭包呢？

闭包在 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

在上面的示例中，increment()、decrement() 和 value()成为公共函数，因为它们包含在返回对象中，而changeBy() 函数成为私有函数，因为它没有返回，只被 increment() 和 decrement() 内部使用。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

JavaScript 闭包总结