Js闭包与循环

目标：点击任何一个li，提示当前点击位置

  <ul>

        <li>第1个</li>

        <li>第2个</li>

        <li>第3个</li>

        <li>第4个</li>

        <li>第5个</li>

    </ul>

    <script>

        var li = document.getElementsByTagName('li');

        for (var i = 0; i< li.length; i++){

            li[i].onclick = function(){

                alert("[2]:"+i); // [2]

            }
            alert("[1]:"+i) // [1]

        }

    </script>

1、先执行[1]位置，弹出5次警示框从0到4,执行的是for语句，i 在for内部已经变为5

2、li[i]，是获取的li的HTMLCollection对象，i[i]相当于li.item(i)

3、为li[i]绑定事件，li[i].onclick 。实际上此时执行的匿名函数动态绑定的li[i]，但是匿名函数是在全局中挂起（我将它理解为调用另一个函数），点击任何li弹出框都报出数字5。

修改成闭包：

    <script>

        var li = document.getElementsByTagName('li');

        for (var i = 0; i< li.length; i++){

            li[i].onclick = (function(num){

                return function(){alert(num);}

            })(i);

        }

    </script>

每一个li[i]，单独调用闭包后的函数，可以理解为每个li[i]单独传值制造函数。

理解闭包：

1. 视为正在执行新函数，且绑定在数据链上的函数，因此如果直接调用内部函数则会报错。（从新生成占用内存，因此谨慎使用）

var foo = {

   baz: ,

   bar: function() {

      return (function(that){

          return that.baz;

      })(this)

   }

};

console.log( foo.bar() ) // 1

2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便。

3.闭包的执行。

var f = (

    function f(){ return ""; },

    function g(){ return ; }

)();

typeof f; // "number"

类似于

function f(){

   function f(){

      var a = ;

      return a;

   };

   function g(){

      var b =;

      return b;

   }

   return LastOne() // lastone 代表最后执行的函数

};

console.log(f());

巴特西

Js闭包与循环

最新文章

热门文章