浅谈匿名函数和闭包

前言

相信不少前端小伙伴在工做和学习中，都会或多或少的接触和了解到匿名函数和闭包。被这俩知识点所困扰，也去网上搜索了很多的资料，查到资料和解释都各有说辞，甚至有些解释自己就是不正确的，这更加让人头疼。今天就来聊一聊匿名函数和闭包，浅谈一下他们之间的关系（实际上他们之间并无什么直接关系！important）。

什么是匿名函数

与匿名函数相对应的是具名函数，具名函数很是简单：function myFn(){}，这就是个具名函数这个函数的name是myFn。能够测试一下：

function myFn(){
}
cosnole.log(myFn.name);//myFn
复制代码

特别说明一下，es6版本中引用型函数表达式也能够当作是具名函数。好比var myFn1 = function(){}，打印myFn1.name，也会获得myFn1。

再说匿名函数，通常用到匿名函数的时候都是当即执行的。一般叫作自执行匿名函数或者自调用匿名函数。经常使用来构建沙箱模式，做用是开辟封闭的变量做用域环境，在多人联合工做中，合并js代码后，不会出现相同变量互相冲突的问题。当即执行的匿名函数有不少种写法，常见的有如下两种：

(function(){ 
  console.log("我是匿名方式1");
})();//我是匿名方式1

(function(){ 
  console.log("我是匿名方式2");
}());//我是匿名方式2

console.log((function(){}).name);//'' name为空
复制代码

二者的区别就是：一个是发起执行的括号在匿名函数括号的外面，另一个发起执行的括号在匿名函数的里面。实际中的书写方式我的的话比较推荐第一种，这种写法更符合调用机制，调用时的参数也比较明显，以下：

(function(i,j,k){ 
  console.log(i+j+k);
})(1,3,5);
//9
复制代码

还有其余一些自执行匿名函数的写法，以下：

-function(){ 
  console.log("我是匿名方式x");
}();
console.log(-function(){}.name);//-0
+function(){ 
  console.log("我是匿名方式x");
}();
console.log(+function(){}.name);//0
~function(){ 
  console.log("我是匿名方式x");
}();
console.log(~function(){}.name);//-1
!function(){ 
  console.log("我是匿名方式x");
}();
console.log(!function(){}.name);//true
void function(){ 
  console.log("我是匿名方式x");
}();
console.log(void function(){}.name);//undefined
复制代码

这几种操做符，有时会影响结果的类型，不推荐使用，你们能够查下资料看看各类方式之间的差异。具名函数其实也能够当即执行，在此不作太多的伸展（本文主要目的是为了说明匿名函数和闭包之间的关系）。

实际上，当即执行的匿名函数并非函数，由于已经执行过了，因此它是一个结果，只不过这个结果能够是一个字符串、数字或者null/false/true，也能够是对象、数组或者一个函数（对象和数组均可以包含函数），结果是什么主要看函数执行完成时return什么。

闭包是怎么定义的，该如何理解

闭包自己定义比较抽象，MDN官方上解释是：A closure is the combination of a function and the lexical environment within which that function was declared. 中文解释是：闭包是一个函数和该函数被定义时的词法环境的组合。 不少地方能够看到一个说法：js中每一个函数都是一个闭包，这样理解也是没有问题的，不过会增长对闭包的理解难度，这里先不这么理解，能够按照闭包起的做用来理解它：就是能在一个函数外部执行这个函数内部定义的方法，并访问这个函数内部定义的变量。

在此，先看个经典的使用闭包的案例，实如今函数外部访问函数内部的局部变量：

function box(){
  var a = 10;
  function inner(){
    return a;
  }
  return inner;
}
var outer = box();
console.log(outer());//10
复制代码

正常状况，box执行事后，会被回收机制回收所占用的内存，包括其内部定义的局部变量。可是此时box执行事后返回一个内部的函数inner，这个inner引用了内部的变量a，inner又被外部outer给接收，回收机制检查到内部的变量被引用，就不会执行回收。

可是看到这里，仍是一脸蒙比，哪里使用了闭包？貌似有三个函数呀，一个box，一个inner还有一个outer = box()。

• 这个案例中用到的闭包实际上是inner和inner被定义时的词法环境，这个闭包被return出来后被外部的outer引用，所以能够在box外部执行这个inner，inner可以读取到box内部的变量a。

• 使用这个闭包的目的是为了在box外部访问a，就是经过执行outer()。

用匿名函数实现闭包

上面的例子是在具名函数box内部用一个具名函数inner实现了闭包，那怎么使用匿名函数实现闭包呢，也很简单：

//第一步直把内部inner这个具名函数改成匿名函数并直接return， 结果一样是10
function box(){
  var a = 10;
  return function(){
    console.log(a) ; 
  }
}
var outer = box();
outer();//10
//第二步把外部var outer = box()改为当即执行的匿名函数
var outer = (function(){
  var a=10;
  return function(){
    console.log(a);
  }
})();
//outer 做为当即执行匿名函数执行结果的一个接收，这个执行结果是闭包，outer等于这个闭包。
//执行outer就至关于执行了匿名函数内部return的闭包函数
//这个闭包函数能够访问到匿名函数内部的私有变量a，因此打印出10
outer();//10
复制代码

这样咱们就改写成了由匿名函数实现的闭包，真正使用到的闭包是内部的被return的函数和这个函数所定义时的环境。由此能够说明：闭包跟函数是否匿名没有直接关系，匿名函数和具名函数均可以建立闭包。

for循环的问题及解决方案

还有一个使人感到困惑，工做和学习中也常常碰见的问题是在for循环中：

for(var i = 0;i<5;i++){
  setTimeout(function(){
    console.log(i);
  },100*i);
}
复制代码

咱们但愿打印出来0,1,2,3,4，然而打印出来的是5个5，很尴尬。什么缘由引发的这问题呢？这是由于setTimeout的回调函数并非当即执行的而是要等到循环结束才开始计时和执行（在此对运行机制不伸展），要说明的一点是js中函数在执行前都只对变量保持引用，并不会真正获取和保存变量的值。因此等循环结束后i的值是已是5了，所以执行定时器的回调函数会打印出5个5。

1）怎么解决这个问题？ 最多见的解决方法就是给定时器外面加一个当即执行的匿名函数，并把当前循环的i做为实参传入这个当即执行的匿名函数。以下：

for(var i = 0;i<5;i++){
  (function(i){
    setTimeout(function(){
      console.log(i);
    },100*i);
  })(i);
}
复制代码

能够获得预想的结果：0,1,2,3,4，此时不少人认为这个当即执行的匿名函数就是闭包，其实这么理解是错误的，而后在错误的理解之上又扩展了好多案例，致使其余人看后不知所谓，一头雾水。附上一张Stack Overflow上一位同窗的回答截图，我以为他说的特别有道理：

原文地址： stackoverflow.com/questions/8…

2）那到底这个for循环中的闭包是什么呢，其中的自执行匿名函数又起到什么做用呢？ 咱们能够试着把这个自执行的匿名函数改写为具名的函数，来测试下结果:

for(var i = 0;i<5;i++){
  function hasNameFn(i){
    setTimeout(function(){
      console.log(i);
    },100*i);
  };
  hasNameFn(i);
}
复制代码

能够发现结果和使用匿名函数的结果是同样的，因此这里也能够说明闭包跟匿名函数没什么直接关系。

这个for循环中的闭包怎么理解以及自执行匿名函数的做用：

• 这个for循环实际上是在执行定时器的回调函数时才真正的产生了闭包，这些回调函数的执行环境是window，相似刚才例子中的引用inner的全局outer的执行环境，匿名函数则至关于刚才例子中的box函数。

• 而自执行的匿名函数的做用也很简单：就是每一次循环建立一个私有词法环境，执行时把当前的循环的i传入，保存在这个词法环境中，这个i就相似上面box函数中var声明的局部变量a。

• 刚才有说到函数在被执行前都只是保存对变量的引用，自执行的匿名函数正是由于执行了，因此可以获取当前的变量i的值。所以定时器的回调函数在执行时引用的i就已经肯定了具体的值。

• 或许咱们改写一下，这么看就能更清晰明了一些：

for(var i = 0;i<5;i++){
  (function(j){
    var _i = j;
    setTimeout(function(){
      console.log(_i);
    },100*_i);
  })(i);
}
复制代码

改写后的匿名函数形参用j来表示，内部定义一个局部变量_i=j。匿名函数执行时传入的是循环时的i，此时定时器里面打印的_i实际上是j，匿名函数当即执行，j的值也会肯定。因此最后每次定时器的回调函数打印的结果也都是这个已经被匿名函数所肯定的值。

3）其余的解决方案 解决刚才for循环的问题，其实根本要解决的问题是如何让每次循环的定时器的回调函数引用当前的i，而不是循环结束后的i。

最简单的方法是使用es6 let，可以为变量建立块级做用域：

for(let i = 0;i<5;i++){
  setTimeout(function(){
    console.log(i);
  },100*i);
}
//改写成下面这么写更好理解一些
for(var i = 0;i<5;i++){
  let j = i;
  setTimeout(function(){
    console.log(j);
  },100*j);
}
复制代码

还能够用bind绑定当前的i给定时器的回调函数（实际上bind方法内部仍是实现了一个对调用者的柯里化闭包，并保存了执行时传入的参数给调用者）:

for(var i = 0;i<5;i++){
  setTimeout(function(i){
    console.log(i);
  }.bind(this,i),100*i);
}
复制代码

能够获得跟使用当即执行函数一样的效果，因此说匿名函数和闭包之间并无什么关系，只不过不少时候在用到匿名函数解决问题的时候刚好造成了一个闭包，就致使不少人分不清楚匿名函数和闭包的关系。

至此，关于匿名函数和闭包的关系，也聊的差很少了，但愿能给那些对匿名函数和闭包比较迷惑的小伙伴一些帮助，同时文章中有不足的地方，也请大伙给予指出，一块儿学习进步！