什么是闭包？闭包的作用及应用场景

不念不忘少年蓝@ 2022-12-29 09:24 150阅读 0赞

### 文章目录 ###

*  一、什么是闭包
 *  二、闭包的作用
 *  三、使用闭包的注意点
 *  四、思考题
 *  五、应用场景
 *  参考文章

# 一、什么是闭包 #

假设，把下面三行代码放在一个立即执行函数中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]  
三行代码中，有一个局部变量local，有一个函数foo，foo里面可以访问到local变量。

好了这就是一个闭包：

**「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。**

有的同学就疑惑了，闭包这么简单么？

「我听说闭包是需要函数套函数，然后 return 一个函数的呀！」

比如这样：

function foo(){ 
      var local = 1;
      function bar(){ 
        local++;
        return local;
      }
      return bar;
    }
    var func = foo()
    func()

这里面确实有闭包，local变量和bar函数组成了一个闭包（Closure）。

**为什么要函数套函数呢？**

是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就是一个全局变量了，达不到使用闭包的目的——隐藏变量（等会会讲）。

有些人看到「闭包」这个名字，就一定觉得要用什么包起来才行。其实这是翻译问题，闭包的原文是 Closure，跟「包」没有任何关系。

所以函数套函数只是为了造出一个局部变量，跟闭包无关。

**为什么要 return bar 呢？**

因为如果不 return，你就无法使用这个闭包。把 return bar 改成 window.bar = bar 也是一样的，只要让外面可以访问到这个 bar 函数就行了。

所以 return bar 只是为了 bar 能被使用，也跟闭包无关。

# 二、闭包的作用 #

**闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。**

假设我们在做一个游戏，在写其中关于「还剩几条命」的代码。

如果不用闭包，你可以直接用一个全局变量：

window.lives = 30 // 还有三十条命

这样看起来很不妥。万一不小心把这个值改成 -1 了怎么办。所以我们不能让别人「直接访问」这个变量。怎么办呢？

用局部变量。

但是用局部变量别人又访问不到，怎么办呢？

暴露一个访问器（函数），让别人可以「间接访问」。

代码如下：

!function(){ 
    
      var lives = 50
    
      window.奖励一条命 = function(){   // 简明起见，用了中文
        lives += 1
      }
    
      window.死一条命 = function(){ 
        lives -= 1
      }
    
    }()

那么在其他的 JS 文件，就可以使用 window.奖励一条命() 来涨命，使用 window.死一条命() 来让角色掉一条命。

看到闭包在哪了吗？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]  
闭包是 JS 函数作用域的副产品。换句话说，正是由于 JS 的函数内部可以使用函数外部的变量，所以这段代码正好符合了闭包的定义。而不是 JS 故意要使用闭包。

JS变量作用域存在于函数体中即函数体，并且**变量的作用域是在函数定义声明的时候就是确定的，而非在函数运行时**。只要你懂了 JS 的作用域，你自然而然就懂了闭包，即使你不知道那就是闭包。

# 三、使用闭包的注意点 #

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

# 四、思考题 #

如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

**代码片段一**

**代码片段二**

# 五、应用场景 #

**例子1**

function fn(){ 
    	var a = 1;
    	return function(){ 
    		return  ++a;                                     
    	}
    }
    alert(fn()());
    alert(fn()());  //每次执行都会初始化 a = 1
    //2 2

**例子2**

function outerFn(){ 
      var i = 0; 
      function innerFn(){ 
          i++;
          console.log(i);
      }
      return innerFn;
    }
    var inner = outerFn();  //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
    inner();
    inner();
    inner();
    var inner2 = outerFn();
    inner2();
    inner2();
    inner2();   
    //1 2 3 1 2 3

**例子3**

**例子4**

上面代码中，例add(1)(2)(3)，代码执行add(1)的时候，声明了add函数的局部变量sum并赋值为1，同时返回子函数tmp，这样add(1)(2)(3)就相当于tmp(2)(3)，因为tmp函数需要用的sum这个变量，使得add执行完毕之后并没有清除sum这个局部变量的数据。这样执行tmp(2)的时候将2与sum相加保存在sum上，同时返回自身tmp。这时sum为3，tmp(2)(3)就相当于tmp(3)，然后运行tmp(3)，把3与sum相加保存在变量sum上，同时返回tmp。这时add(1)(2)(3)运行之后结果是tmp函数（sum=6），而用console.log()函数显示结果的时候会将里面的内容自动转换为字符串，所以console.log(tmp)相当于console.log(tmp.toString())，而这个toString()函数被重定义为return sum，所以结果就是console.log(sum)//6，以此类推如果后面还有括号那么sum将继续加下去到最后剩下tmp然后运行toString()返回结果。

点这里了解[柯里化函数][Link 1]。

**例子5**

**例子6**

//事件处理函数中闭包的写法
    var lis = document.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++){ 
        (function(i){ 
            lis[i].onclick = function(){ 
                console.log(i);
            };
        })(i);
    }

上面代码中，事件函数中用到了循环值i，利用闭包其实就是为了把当前的循环值传递进去。

**例子7**

**例子8**

上面例子7和例子8代码对比，例子8在for循环里arr\[i\] = 这一句主要是赋予它一个闭包，赋予的是立即执行函数“(function(i\{…\}))(i)”，执行之后返回的函数保存了i的值。相比较例子7只是赋予了普通函数，返回的i在最后调用的时候才获取，这时候i已经变成5了， 如果把例子7的for循环中var i = 0改为let i = 0，结果就和例子8一样，因为let会保证i每次都是不同的。

# 参考文章 #

[https://zhuanlan.zhihu.com/p/22486908][https_zhuanlan.zhihu.com_p_22486908]  
[http://www.ruanyifeng.com/blog/2009/08/learning\_javascript\_closures.html][http_www.ruanyifeng.com_blog_2009_08_learning_javascript_closures.html]  
[https://blog.csdn.net/weixin\_43586120/article/details/89456183][https_blog.csdn.net_weixin_43586120_article_details_89456183]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20221120/8dc22f9539bc4b809b942ec1893d77c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/4d7839678d054a4dbda1fb1bd09cc585.png
[Link 1]: https://blog.csdn.net/HuangsTing/article/details/111941637
[https_zhuanlan.zhihu.com_p_22486908]: https://zhuanlan.zhihu.com/p/22486908
[http_www.ruanyifeng.com_blog_2009_08_learning_javascript_closures.html]: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
[https_blog.csdn.net_weixin_43586120_article_details_89456183]: https://blog.csdn.net/weixin_43586120/article/details/89456183