javascript 闭包的理解

javascript中的作用域、闭包是一个不好理解的概念，需要慢慢领悟。现在把我自己学习作用域、闭包所理解的东西分享一下。

要领悟闭包必需理解javascript变量的作用域问题。

看下面代码1

var str="test";      //定义str
    if(true){
        var str="hello";     //定义str
    }

    alert(str);

 

会打印输出什么：test 还是 hello？

 

你会看到hello

 

看下面代码2

var str="test";      //定义str
    function a(){
        if(true){
            var str="hello";     //定义str
        }
    }
    a();
    alert(str);

 

会打印输出什么：test 还是 hello？

你会看到test

 

让我明白：代码1与代码2比较一下可以看到代码2多了一个function，在javascript中一直描述作用域“函数级”，在a()同定义了一个str，作用域就在a()函数内，与外面定义str没有关系。

 

我们在学习javascript的时候变量有：全局变量和局部变量

这里提到的全局变量与函数级作用域也有关系。

 ------------------------------------- ------------------------------------- -------------------------------------

看下面代码3

var str="test";      //定义str
    alert(str==window.str)

 会打印输出什么：true还是false?

你会看到true

 

看下面代码4

function a(){
        str="test";
    }
    a();
    alert(str==window.str)

 会打印输出什么：true还是false?

你会看到true

 

让我明白：定义全局变量的两种方式：1.不定义在函数内，2.在fun中不加关键字var，所有的全局变量都是window对象的属性。

  ------------------------------------- ------------------------------------- -------------------------------------

看下面代码5

(function(){
    var str="test";
    if(true){
        var str="hello";
    }
    alert(str);
    alert(str==window.str);
})()

  会打印输出什么：test还是hello?  true 还是false?

你会看到hello,false;

 

让我明白：代码5与代码1看上去很像，但本质已经变了，代码中已经包装了一个匿名函数，既然是函数，那么里面的变量都是函数级的了，使用var定义的str就是函数级的变量，作用范围只能在匿名函数中。而window现在根本没有str这个属性。你可以尝试使用alert(window.str)，你会看到undefined，因为str根本不存在。

 

关于闭包要理解作用的基础上去理解闭包。

也许闭包的说法很多，但我个人觉得《精通javascript》的说法我能更好的理解：闭包意味着内层的函数可以引用存在于包围它的函数内的变量，即使外层函数的执行已经终止。从文字上去理解真是有些困难。

  ------------------------------------- ------------------------------------- -------------------------------------

看下面代码6

<button id="btnAdd">+</button>

 

var btnAdd = document.getElementById("btnAdd");

    function addNum(){
        var num=0;
        return function(){
            alert(num++);
        }
    }
    btnAdd.onclick = addNum();

 

连续点击button会怎么样呢？

第一次点击弹出：0

第二次点击弹出：1

第三次点击弹出：2

第四次点击弹出：3

...

会延续下去。

为会呢？

让我明白：原来上面是一个闭包，内层函数是一个return 的匿名函数，这个匿名函数去访问包围它的addNum变量num。当在执行btnAdd.onclick = addNum();addNum()就已经终止了，当我们点击button的时候还在访问变量num，也就意味着点击button的时候只执行了这个匿名函数，外层函数没有执行。

  ------------------------------------- ------------------------------------- -------------------------------------

看下面代码7

<ul>
    <li><a href="">aa1</a></li>
    <li><a href="">aa2</a></li>
    <li><a href="">aa3</a></li>
    <li><a href="">aa4</a></li>
</ul>

 

var aArg = document.getElementsByTagName("a");
    for(var i=0;i<aArg.length;i++){
        aArg[i].onclick = function () {

                alert(i);
           }
    }

 

 以上代码会怎么样呢？不管你点击aa1还是aa2还是aa3还是aa4都会统一弹出：4，

是这为什么呢？

上面是一个闭包，但我们在点击的时候代码已经执行完成，代码执行完成后i的值是4 。所以一直会弹4。（闭包允许你引用父函数中的变量，但提供的值并非该变量创建时的值，而是父函数范围内的最终值）。

明白这一点所以我们必须创建一个作用域来保存每次for循环时i的值。

 

看下面代码8

  var aArg = document.getElementsByTagName("a");
    for (var i = 0; i < aArg.length; i++) {
        (function () {
            var index = i;
            aArg[i].onclick = function () {
                alert(index);
            }
        })()
    }

 

代码8中有一个立即执行函数，来保存i的值。

这样点aa1的时候，弹出0

这样点aa2的时候，弹出1

这样点aa3的时候，弹出2

这样点aa4的时候，弹出3

 

理解好作用域与闭包我们可以简化很多工作，javascript里面有很多细节的东西，学会javascript是简单的事情，但想学习好有很长的路要走。有兴趣的朋友加QQ:460666546