匿名函数和闭包

Query片段：

view plaincopy to clipboardprint?

1. (function(){  
2. //这里忽略jQuery所有实现  
3. })();  

　　半年前初次接触jQuery的时候，我也像其他人一样很兴奋地想看看源码是什么样的。然而，在看到源码的第一眼，我就迷糊了。为什么只有一个匿 名函数又没看到运行（当然是运行了……），就能有jQuery这么个函数库了？于是，我抱着疑问来到CSDN。结果相信现在很多人都很清楚了（因为在我之 后也不乏来者，呵呵~）。当一个匿名函数被括起来，然后再在后面加一个括号，这个匿名函数就能立即运行起来！真神奇哦！

　　嘿嘿！胡闹到此为止。在这一节，我们碰到的jQuery片段是一组立即运行的匿名函数。而这种用法在论坛上也曾引起过激辩——这段代码究竟属不 属于闭包呢？带着这个疑问，我们从基础开始，分析每个关键要素，寻找属于自己的答案。（没错，自己的答案！在我看来，所有理论只是形式，只要它有利于我们 的应用实现，就是可取的——黑猫白猫，抓到老鼠的就是好猫！）

　　要说匿名函数，我们首先要由函数本身说起。函数的定义如下：

函数是将唯一的输出值赋予给每一输入的“法则”。

　　当然，这只是数学上的定义。但是，在计算机编程语言中，函数的定义也八九不离十。因为，我们都知道，计算机中的函数，也类似数学定义中的描述，它是将输入的若干数据，经过代码设定的逻辑操作处理后，返回唯一的输出的一组代码组合块。——当然，特例是，输入的数据为空或输出的数据为空，或者两者都为空。

　　下面，我们先初步了解一下和匿名函数相关的概念。

• 函数声明（function 语句）

　　要使用一个函数，我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数，如：

view plaincopy to clipboardprint?

1. function abc(){  
2.   // code to process  
3. }  

 　　当然，你的函数也可以是带参数的，甚至是带返回值的。

view plaincopy to clipboardprint?

1. function abc(x,y){  
2.   return x+y;  
3. }  

　　但是，无论你怎么去定义你的函数，JS解释器都会把它翻译成一个Function对象。例如，你在定义上面的其中一个例子的函数号，再输入如下代码：

view plaincopy to clipboardprint?

1. alert(typeof abc);// "function"  

　　你的浏览器就会弹出提示框，提示你abc是一个Function对象。那么Function对象究竟是什么呢？

• Function 对象

　　Function对象是JavaScript里面的固有对象，所有的函数实际上都是一个Function对象。关于这个方面的讨论，我们留到下一个专题节。我们先看看，Function对象能不能直接运用构造函数创建一个新的函数呢？答案是肯定的。例如：

view plaincopy to clipboardprint?

1. var abc = new Function("x","y","return x*y;");  
2. alert(abc(2,3)); // "6"  

　　相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢？

• 声明匿名函数

　　顾名思义，匿名函数就是没有实际名字的函数。例如，我们把上面的例子中，函数的名字去掉，再判断一下他是不是一个函数：

view plaincopy to clipboardprint?

1. alert(typeof function(){});// "function"  
2. alert(typeof function(x,y){return x+y;});// "function"  
3. alert(typeof new Function("x","y","return x*y;"))// "function"  

　　我们可以很容易地看到，它们全都是Function对象，换言之，他们都是函数，但是他们都有一个特点——没有名字。所以我们把他们称作“匿名函数”。然而，正因为他们没有“名字”，我们也没有办法找到他们。这就引申了如何去调用一个匿名函数的问题了。

• 匿名函数的调用

　　要调用一个函数，我们必须要有方法定位它，引用它。所以，我们会需要帮它找一个名字。例如：

view plaincopy to clipboardprint?

1. var abc=function(x,y){  
2.   return x+y;  
3. }  
4. alert(abc(2,3)); // "5"  

　　上面的操作其实就等于换个方式去定义函数，这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候，我们通常都不会为他们定名字，而是赋予它的对应事件引用一个匿名函数。

　　对匿名函数的调用其实还有一种做法，也就是我们看到的jQuery片段——使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表）。我们再看一下以下例子：

view plaincopy to clipboardprint?

1. alert((function(x,y){return x+y;})(2,3));// "5"  
2. alert((new Function("x","y","return x*y;"))(2,3));// "6"  

　　很多人或许会奇怪，为什么这种方法能成功调用呢？觉得这个应用奇怪的人就看一下我以下这段解释吧。

　　大家知道小括号的作用吗？小括号能把我们的表达式组合分块，并且每一块，也就是每一对小括号，都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以，当我们用一对小括号把匿名函数括起来的时候，实际上小括号对返回的，就是一个匿名函数的Function对象。因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。

　　不知道以上的文字表述大家能不能看明白，如果还是理解不了的话，再看一下以下的代码试试吧。

view plaincopy to clipboardprint?

1. var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc  
2. // abc的constructor就和匿名函数的constructor一样了。也就是说，两个函数的实现是一样的。  
3. alert((abc).constructor==(function(x,y){return x+y;}).constructor);  

　　PS：constructor是指创建对象的函数。也就是函数对象所代表的函数体。

　　总之，将其（被小括号包含的匿名函数）理解为括号表达式返回的函数对象，然后就可以对这个函数对象作正常的参数列表调用了。（前面这里犯了个错 误，只有函数表达式还是不能直接调用函数的，去掉匿名函数括号必须要伴随将表达式赋值。也就是(function(){alert(1)})()应该是与 a=function(){alert(1)}()等价，不能连a=都去掉。）

• 闭包

 　

可以保留局部变量不被释放的代码块，被称为一个闭包

闭包的概念比较抽象，相信大家都或多或少知道、用到这个特性

那么闭包到底能给我们带来什么好处？

先来看一下如何创建一个闭包：

// 创建一个闭包
function makeCounter() {
  let k = 0;

  return function() {
    return ++k;
  };
}

const counter = makeCounter();

console.log(counter());  // 1
console.log(counter());  // 2

makeCounter 这个函数的代码块，在返回的函数中，对局部变量 k ，进行了引用，导致局部变量无法在函数执行结束后，被系统回收掉，从而产生了闭包。而这个闭包的作用就是，“保留住“ 了局部变量，使内层函数调用时，可以重复使用该变量；而不同于全局变量，该变量只能在函数内部被引用。

换句话说，闭包其实就是创造出了一些函数私有的 ”持久化变量“。

所以从这个例子，我们可以总结出，闭包的创造条件是：

1. 存在内、外两层函数
2. 内层函数对外层函数的局部变量进行了引用

闭包的用途

闭包的主要用途就是可以定义一些作用域局限的持久化变量，这些变量可以用来做缓存或者计算的中间量等等。

// 简单的缓存工具
// 匿名函数创造了一个闭包
const cache = (function() {
  const store = {};

  return {
    get(key) {
      return store[key];
    },
    set(key, val) {
      store[key] = val;
    }
  }
}());

cache.set('a', 1);
cache.get('a');  // 1

上面例子是一个简单的缓存工具的实现，匿名函数创造了一个闭包，使得 store 对象 ，一直可以被引用，不会被回收。

闭包的弊端

持久化变量不会被正常释放，持续占用内存空间，很容易造成内存浪费，所以一般需要一些额外手动的清理机制。

　　看到这里，你能判断究竟jQuery的那个代码片段是否闭包了吗？

　　以我的理解来说吧。是否应用了闭包特性，必须确定该段代码有没有 最重要的要素：未销毁的局部变量。那么很显然，没有任何实现的匿名函数不可能应用了闭包特性。但如果匿名函数里面有实现呢？那也还得确定它的实现中有没有 用到那些未销毁的局部变量。所以如果问你那个开篇中的jQuery代码片段是应用了JS里的什么特性？那么它只是匿名函数与匿名函数的调用而已。但是，它 隐含了闭包的特性，并且随时可以实现闭包应用。因为JS天生就是有这个特性的！（这只是我的理解，我也想知道你的理解，欢迎交流！关于闭包，有机会还是独立再开一个专题吧！）