[Javascript] 闭包 closure

闭包是十分的重要
校招面试的几家公司都要问到闭包的问题
最经典的是问到
闭包是什么 有什么作用
闭包循环和累加的应用
更改闭包的作用域

(1) 概念

全局下 取不到局部的变量的值

<script type="text/javascript">
    function a(){
      var name1="jessica";
      console.log(name1);
    }
    console.log(name1);
    //Uncaught ReferenceError: name1 is not defined 
</script>

闭包是一个 有权访问另一个函数作用域的变量的函数。且始终放在内存当中

<script type="text/javascript">
    function a(){
      var name="jessica";
      return function(){//匿名函数 闭包的使用
         return name;
      }
    }
    console.log(a()());
    //jessica
</script>

---

(2) 闭包+变量

问题：闭包只能取到任何变量的最后一个值
块级作用域
(function(){
//块级作用域
})();

---

(3) 闭包经典案例 - 累加

<script type="text/javascript">
   function a(){
     var i=100;
     return function(){
        i++;
        return i;
     }
   }
   var b=a();//获取函数
   console.log(b());
   console.log(b());
   console.log(b());
   console.log(b());
   console.log(b());
</script>

(4) 闭包经典案例 - 循环

问题：

<script type="text/javascript">
  function a(){
    var array=[];
    for (var i = 0; i < 5; i++) {
      array[i]=function(){
        return i;
      }
    }
    return array;
  }
  var b=a();
  for (var i = 0; i < b.length; i++) {
       console.log(b[i]());//五个5 不是01234
   //b[i]调用的是匿名函数，匿名函数并没有自我执行
   //等调用的时候, a()已经执行完毕了
  };
</script>

---

解决：

<script type="text/javascript">
  function a(){
    var array=[];

    for (var i = 0; i < 5; i++) {
      array[i]=(function(i){
        return i;
      })(i);//匿名函数自我执行
    }

    return array;
  }
  var b=a();
  for (var i = 0; i < b.length; i++) {
       console.log(b[i]);
  };
</script>

(4) this对象

<script type="text/javascript">
 var name="jessica";
 var obj={
    name:"krystal",
    a:function(){ 
      return function(){
        return this.name;
      }
   /*取到的值为什么是jessica?
   因为在闭包中, this指的是window
 */
    }
 }

var b=obj.a();
console.log(b());//jessica
</script>

解决：

(1) that =this

<script type="text/javascript">
 var name="jessica";
 var obj={
    name:"krystal",
    a:function(){ 
      var that=this;
      return function(){
        return that.name;
      }
    }
 }

var b=obj.a();
console.log(b());//krystal
</script>

(2) call

<script type="text/javascript">
 var name="jessica";
 var obj={
    name:"krystal",
    a:function(){ 
      return function(){
        return this.name;
      }
    }
 }

 console.log(obj.a().call(obj));
 //用obj来冒充, 改变作用域来执行a()
</script>