JavaScript 匿名函数和闭包介绍

<p>匿名函数:没有名字的函数;<br>
闭包:可访问一个函数作用域里的变量的函数;</p>
<p><strong>一匿名函数</strong></p>
<div class="blockcode">
<pre class="brush:js;">
// 普通函数
  function box(){          // 函数名是box;
return 'Lee';
  }
  box();             // =>Lee; 调用函数;
// 匿名函数
  function(){             // 匿名函数,会报错;
return 'Lee';
  }
// 通过表达式自我执行
  (function(name){
console.log(name);       // =>Lee;
  })("Lee");             // "()"表示执行函数,并且可以传参;
// 把匿名函数赋值给变量
  var box = function(){       // 将匿名函数赋给变量;
return 'Lee';
  };
  console.log(box());       // 调用方式和函数调用相似;
// 函数里的匿名函数
  function box(){
return function(name){    // 函数里的匿名函数,产生闭包;
   return name;
};
  };
  console.log(box()("Lee"));    // 函数box()调用匿名函数,并传参;</pre>
</div>
<p><strong>二闭包</strong></p>
<p>闭包:有权访问另一个函数作用域中的变量的函数;<br>
创建闭包的常见方式:在一个函数内部创建另一个函数;通过另一个函数访问这个函数的局部变量;</p>
<div class="blockcode">
<pre class="brush:js;">
// 通过闭包可以返回局部变量
  function box(){
var user = 'Lee';
return function(){       // 通过匿名函数返回box()的局部变量user;
   return user;
};
  }
  console.log(box()());       // =>Lee; 直接调用box()()来获得匿名函数的返回值;

  var b = box();
  console.log(b());       // =>Lee; 另一种调用匿名函数方式;

// 优点:可以把局部变量驻留在内存中,可以避免使用全局变量;
// (全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难;所以推荐使用私有的,封装的局部变量);</pre>
</div>
<div class="blockcode">
<pre class="brush:js;">
// 缺点:
// 通过全局变量来累加
  var age = 100;          // 全局变量;
  function box(){
age++;             // 模块级可以调用全局变量,进行累加;
  };
  box();             // 执行函数,累加一次;
  console.log(age);          // =>101; 输出全局变量;
  box();             // 执行函数,累加一次;
  console.log(age);          // =>102; 输出全局变量;
// 通过局部变量无法实现累加
  function box(){
var age = 100;
age++;             // 实现累加;
return age;
  }
  console.log(box());       // =>101;
  console.log(box());       // =>101; 无法实现累加,因为第二次调用函数时,函数内部变量age又被初始化了;

// 通过闭包可以实现局部变量的累加
  function box(){
var age = 100;
return function(){       // 匿名函数内实现累加;
   age++;
   return age;       // 并返回累加后的变量;
};             // 此时box()函数的局部变量age的值已经被修改为累加后的值;
  }
  var b = box();          // 给box()函数赋值给变量;
  console.log(b());          // =>101; 调用匿名函数,累加一次;
  console.log(b());          // =>102; 第二次调用匿名函数,累加两次;

// PS:由于闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更多的内存;所以过度使用闭包会导致性能下降;(将闭包引用在"私有作用域"中即可实现变量销毁)
// 作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值; ?</pre>
</div>
<div class="blockcode">
<pre class="brush:js;">
// 循环里包含匿名函数
  function box(){
var arr = [];
for(var i=0; i<5; i++){    // 当声明变量i=5时,循环停止;而此时循环里的变量i==5;
   arr[i] = function(){ // arr[i]得到的只是没有执行的匿名函数function(){};
      return i;
   };
};
return arr;          // arr = [function,function,function,function,function];
  }
  var b = box();          // =>[function,function,function,function,function]; 得到函数box()返回的数组arr;
  console.log(b.length);    // =>5; 得到函数集合数组长度;
  for(var i=0; i<b.length; i++){
console.log(box()[i]()); // =>5,5,5,5,5; 输出每个函数的值,都是最后一个值;
  }
  // 上面的例子输出的结果都是5,也就是循环后得到的最大i值;
  // 因为b[i]调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,box()已执行完毕,i早已变成5;

// 循环里包含匿名函数-改1,自我执行匿名函数
  function box(){
var arr = [];
for(var i=0; i<5; i++){
   arr[i] = (function(num){  // arr[i]得到的是匿名函数执行后的结果数值0-4;
      return num;
   })(i);          // 自我执行并传参;
}
return arr;
  }
  var b = box();          // =>[0,1,2,3,4]; 此时b代表box()返回的数组;
  for (var i = 0; i < b.length; i++) {
console.log(b[i]);    // 0 1 2 3 4; 这里返回的是数值;
  };
  // 例子中,我们让匿名函数进行自我执行,导致最终返回给a[i]的是数组而不是函数了;