javascript闭包和立即执行函数的作用

╰+哭是因爲堅強的太久メ 2023-10-09 10:03 34阅读 0赞

转自：[https://www.cnblogs.com/carriezhao/p/7237095.html][https_www.cnblogs.com_carriezhao_p_7237095.html]

一、闭包——closure

先看一个闭包的例子。我们想实现一个计数器，最简单的方法就是定义一个全局变量，计数的时候将其加1。但是全局变量有风险，哪里都有可能不小心改掉它。那局部变量呢，

它只在函数内部有效，函数调用完后它就没了，而且全局没法使用。那我们用想让计数器全局使用，又不想让这个变量被随便修改怎么办。这就需要闭包了：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code>&nbsp; 
      <code>count(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>i=0;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>++i;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}&nbsp;&nbsp;&nbsp;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个例子实现了一个简单的计数器。函数"count()"定义了一个局部变量“i”，并返回一个内部匿名函数。因为是内部函数，所以它可以访问其外部函数的局部变量“i”，并且将其加1并返回。让我们看下怎么使用这个计数器。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>c1 = count();</code> 
     </div> 
     <div> 
      <code>console.log(c1());&nbsp;&nbsp;</code> 
      <code>//print1</code> 
     </div> 
     <div> 
      <code>console.log(c1());&nbsp;&nbsp;</code> 
      <code>//print2</code> 
     </div> 
     <div> 
      <code>console.log(c1());&nbsp;&nbsp;</code> 
      <code>//print3</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>c2 = count();</code> 
     </div> 
     <div> 
      <code>console.log(c2());&nbsp;&nbsp;</code> 
      <code>//print1</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

每次调用“count()”函数后就会生成一个计数器，而且不同的计数器之间不干扰。因为两次调用同一个函数，创建的栈是不同的，因此栈内的局部变量是不同的。上例中，我们生成了全局计数器“c1”和“c2”，他们都是不带参数的函数，即“count()”中返回的匿名函数。此后每次调用计数器，比如“c1()”，计数器就会自增1并返回。但是由于“count()”函数已经调用完毕，我们将无法通过任何其他办法去修改“count()”中变量“i”的值。这就是闭包最实用的功能，就是**将你想操作的变量或对象隐藏起来，只允许特定的方法才能访问它**。

二、立即执行函数

n年前看到jQuery的源码时，很好奇它的最外层结构是这样的（现在已经不一样了）：var jQuery = (function()\{……\})();

作为前端小白的我，实在想不通这是为什么，好好定义一个函数，为啥还要调用它。大家知道javascript在es6之前并不严格支持面向对象。js的对象其实就是一个map，比如下面的例子：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>car = { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>speed:0,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>start:</code> 
      <code>function</code> 
      <code>(){&nbsp;</code> 
      <code>this</code> 
      <code>.speed=40; },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getspeed:</code> 
      <code>function</code> 
      <code>(){&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>this</code> 
      <code>.speed; }</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
     <div> 
      <code>car.start();</code> 
     </div> 
     <div> 
      <code>console.log(car.getspeed());&nbsp;</code> 
      <code>//print 40</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个对象有其成员变量“speed”及成员函数“start”和“getspeed”，但是它的成员变量没有私有化，同时它也没有办法被继承。要实现对象的继承，你可以使用构造函数和原型继承。但怎么才能将成员变量私有化来实现对象的封装呢（而且有时候我们也不想那么麻烦使用原型）？有心的读者看了上面闭包的介绍，肯定马上有想法了。对，使用闭包！

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code>&nbsp; 
      <code>car() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>speed = 0;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>{&nbsp;</code> 
      <code>//返回的是一个对象</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>start:</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>speed = 50;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getspeed:</code> 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>speed;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>car1 = car();</code> 
     </div> 
     <div> 
      <code>car1.start();</code> 
     </div> 
     <div> 
      <code>console.log(car1.getspeed());&nbsp;</code> 
      <code>//print 50</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

说了那么多，跟立即执行函数有什么关系呢。你再仔细看看上面的例子，你有了闭包函数来帮你创建“car”对象，这个函数就类似于工厂方法，它可以根据你的需要创建多个不同的对象。不过开发的时候经常遇到这样的情况，就是我们希望对象只有一份，比如jQuery库的对象，它必须确保整个程序只有一份，多了也没有。在后端开发模式中，这叫单例模式，可以通过私有化构造函数来实现，那么在js里呢？

既然函数没法私有化，那么唯一的办法就是让这个工厂方法能且只能被调用一次。不能多次调用，那这个函数一定要是匿名函数；而且能被调用一次，那就必须在声明的时候立马执行。这时候，我们就可以邀请立即执行函数出场了：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>car = (</code> 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code>&nbsp; 
      <code>speed = 0;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>start:</code> 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>speed=60;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getspeed:</code> 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>speed;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>})();</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>car.start();</code> 
     </div> 
     <div> 
      <code>console.log(car.getspeed());&nbsp;</code> 
      <code>//print 60&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

很多人一开始会看错，认为对象“car”是一个函数，其实它是这个匿名的工厂方法执行完返回的对象，该对象拥有“start”和“getspeed”两个成员函数，而这两个函数所需要访问的“speed”变量对外不可见。同时你无法再次调用这个匿名的工厂方法来创建一个相同的对象。是不是很神奇？一个单例的，有着私有成员的对象就这么建好了。

立即执行函数还有一种写法就是：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code>&nbsp; 
      <code>car = (</code> 
      <code>function</code>&nbsp; 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>……&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
     </div> 
     <div> 
      <code>}());</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/sharpest/p/11439763.html

[https_www.cnblogs.com_carriezhao_p_7237095.html]: https://www.cnblogs.com/carriezhao/p/7237095.html