[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>