JavaScript中的闭包

2024年3月12日 161次阅读来源: 游荡de蝌蚪

媒介

置信许多小伙伴在事情也许口试进程中都遇到过这个题目，作为典范的前端口试题之一，它高频地涌如今我们的求职生涯中。所以，相识和控制它也就变得十分必要了

读完这篇文章，你也许就会晓得:

闭包是什么，它是怎样构成的
为何要应用闭包
闭包会形成哪些题目

假如文章中有涌现马虎、毛病的地方，还请看到的小伙伴多多指教，先行谢过

以下↓

作用域

what？不是在说闭包么，怎样又扯到作用域上面去了

稍安勿躁，在我们相识闭包之前，照样很有必要先相识一下 JavaScript 中的作用域

我们都晓得在 JavaScript 中存在着全局变量和部份变量，全局变量能够在任何地方接见到，然则部份变量只能在当前作用域中接见。全局作用域是不能直接接见部份作用域中的变量，而部份作用域能够直接接见全局作用域当中的变量

就像一个代码块儿或函数被嵌套在另一个代码块儿或函数中一样，作用域也会被嵌套在其他的作用域中。所以，假如在直接作用域中找不到一个变量的话，就会征询下一个外层作用域，云云继承直到找到这个变量也许抵达最外层作用域（也就是全局作用域）

说了这么多，实在说白了，所谓 作用域就是一组划定规矩，它决议了一个变量（标识符）在那里和怎样被查找

试想一下，如今有一个如许的需求：我们想在全局作用域拿到部份作用域的某一个变量该怎样去做呢？

初识闭包

在
JavaScript 中闭包无所不在，你只是必需认出它并接纳它

一般情况下，我们并不能拿到部份作用域的变量。然则，我们能够应用变通的体式格局：定义一个函数

让我们看一下这段代码

function foo() {
    var a = 2;
    function bar() {
        console.log( a ); // 2
    }
}

如许在函数 foo 中定义一个 bar 函数，在这个函数中我们就可以接见到定义在函数 foo 中的变量 a 。既然我们如许就可以够接见到 foo 函数内里的变量，那末，只需我们将 bar 这个函数作为返回值输出，不就完成我们的需求了么？是的！

function foo() {
    var a = 2;
    function bar() {
        console.log( a ); // 2
    }
    return bar
}

var result = foo();

result() // 2

这就是闭包

让我们来看看这个函数做了什么：

创建了一个函数 foo
函数内里创建了一个变量 a 与函数 bar
返回函数 bar

如今，我们就对闭包有了一个基础的观点：定义在一个函数内部的函数

再遇闭包

词法作用域：简朴理解为作用域是由编写时函数被声明的位置定义的

照样来看一下下面的代码

function foo() {
    var a = 2;
    function baz() {
        console.log( a ); // 2
    }
    bar( baz );
}

function bar(fn) {
    fn(); 
}

与前面示例差别的是，这里我们并没有将函数 baz 返回，而是将它当作值通报给 bar 这个函数，然后在 bar 这个函数内里实行，函数 bar 坚持了函数 baz 的援用

雷同的是，实际上函数 baz 都在它被编写时的词法作用域以外被挪用，bar() 依旧具有对谁人作用域的援用，而这个援用称为闭包

这就是闭包

好了，看到这里是否是还有点懵呢，让我们再来看一个越发罕见的示例

for(var i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
}

毫无疑问，运转上面的代码会输出 5 个 6.很明显，我们获得的效果是 i 在轮回以后的终究值

那末，为何会是如许呢？

实在，因为作用域的事情体式格局，我们在定时器函数中接见到的 i 是同享到全局作用域的上的，它只要一个，就是终究轮回完毕的值

想让这个轮回显现我们想要的效果也很简朴，只需要如许：

for(var i = 1; i <= 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j)
        }, 1000)
    })(i)
}

应用一个马上实行函数将定时器函数包裹起来，在这个函数中定义一个变量 j，然后将 i 当作值通报进去。如许，在每次迭代的时刻，变量 j 都邑具有 i 的一个拷贝，天然获得了我们想要的效果

一样的，这也是一个闭包

固然，我们也能够应用
ES6 中的
let 关键字声明变量
i

经由过程前面的一些示例，我们不难发明：闭包实在并没有特定的花样，只需满足一些前提，它就是闭包

所以：

闭包就是当一个函数即使是在它的词法作用域以外被挪用时，也能够记着并接见它的词法作用域

闭包的用处

闭包最大的用处：

读取函数内部的变量
让这些变量一向保留在内存中

function f1(){
　 var n=999;
　 nAdd=function(){n+=1}
　 function f2(){
　　　 alert(n);
　 }
　 return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000

在这段代码中，result 实际上就是闭包 f2 函数。它一共运转了两次，第一次的值是 999 ，第二次的值是 1000 。这证明了，函数 f1 中的部份变量 n 一向保留在内存中，并没有在 f1 挪用后被自动消灭

应用闭包模仿私有要领(数据隐蔽和封装)

私有要领不单单议有利于限定对代码的接见：还供应了治理全局定名空间的壮大才能，防止非中心的要领弄乱了代码的大众接口部份

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

这个环境中包括两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都没法在这个匿名函数外部直接接见。必需经由过程匿名函数返回的三个大众函数接见。

这三个大众函数是同享同一个环境的闭包