javaScript 闭包

时间:2021-2-20 作者:admin

引入

闭包(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() 内部使用。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。