Javascript闭包与作用域

摘自开源中国

闭包和作用域是js中比较重要的知识，自己理解起来也有一定的难度

1.Javascript的作用域是函数作用域而非块级作用域

?

1 2 3 4 5 6 7 8 9 10 11 12

//C语言 #include <stdio.h> void main() {    int i=2;    i--;    if(i)    {        int j=3;    }    printf("%d/n",j);      //use an undefined variable:j }

这是因为c中的作用域是块级的，j是在if后的{ }中定义的，所以无法访问，然而在js中会是什么情况？

?

1 2 3 4 5 6 7

(function(){         var i=1;         if(i==1){             var j=3;         }         console.log(j);     //3     })()

在这里，j是可以访问的，也就是说在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的

这里提及一句Javascript的作用域链（scope chain），每个函数定义时都会将他的作用域链定设为他定义的环境

?

1 2 3 4 5

function a(){     function b(){         //code     } }

这段代码中，b的环境为a，a的环境为全局（window），在b中查找变量时会先搜索自身函数内部，如果不存在就去a的内部查找，还不存在就去全局中查找，若还是找不到就是undefined，这就构成一条链

2.Javascript中变量的作用域分为全局变量和局部变量

在函数内部可以访问全局变量和函数内的局部变量，而在函数外部访问不到函数内的变量，看代码

?

1 2 3 4 5

var p=11; function f1(){    console.log(p); } f1();   //11

?

1 2 3 4 5

function f1(){     var p=11; } f1(); console.log(p);  //ReferenceError: p is not defined

通过这俩段代码可以理解全局变量和局部变量，但是定义局部变量时一定要注意加上var，如果不加上其实定义的是一个全局变量，看代码

?

1 2 3 4 5

function f1(){     p=11; } f1(); console.log(p);       //11

3.那如何访问函数内部的变量并对它进行操作呢？这里就需要用到闭包

先看看闭包的官方解释：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分

看到这句户我不禁想问，这是个啥？

后来参考了一些博客和《Javascript秘密花园》才开始理解，闭包大概就是函数内部的一个函数被外部调用，这样就可以调用内部变量了，比如下面这段

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function f1(){     var p=11;         return {             increment: function() {                 p++;             },                   show: function() {                 alert(p)             }         } } var f=f1(); f.show();      //11 f.increment(); f.show();      //12

先看一下控制台，f是什么样的

这里可以看到，f包含increment和show两个函数，而这两个函数是f1的内部函数所以可以访问p这个变量，在我理解，这里的increment和show就是f1()的两个闭包，用他们就可以从外部调用这个变量

4.闭包可以做些什么？

首先我觉得可以模拟private，就像上面那段代码，这个变量只能在这个函数内部访问，也只有使用了闭包才能访问

第二，和Javascript的垃圾回收有关，这里我还不是很清楚，等到搞明白了再来补上

5.这里有一个要注意的就是循环中使用闭包的问题，这里借用《Javascript秘密花园》里的一个例子

?

1 2 3 4 5 6 7 8

function f1(){   for(var i = 0; i < 10; i++) {     setTimeout(function() {         console.log(i);      }, 1000);   } } f1();

这段代码输出的是10个10而不是期望的0到9，因为闭包内是对i的引用，然后函数执行时i已经变成了10，这里可以使用自执行的匿名函数

?

1 2 3 4 5 6 7 8 9 10 11

function f1(){   for(var i = 0; i < 10; i++) {      (function(e) {         setTimeout(function() {             console.log(e);          }, 1000);     })(i);     } } f1();

这里的匿名函数将i作为参数，这里的e会有i的一个拷贝，而引用时是对e的引用，这就避免了上述的问题