闭包案例---点击按钮打印对应按钮的下标

  <button>按钮0</button>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
  <button>按钮7</button>
  <button>按钮8</button>
  <button>按钮9</button>

   // 需求：点击按钮，打印对应按钮的下标

    var btns = document.querySelectorAll('button')
    // 方法一:没有使用闭包
    for(var i=0;i<btns.length;i++) {
      btns[i].index = i;
      btns[i].onclick=function(){
        // console.log(i);
        console.log(this.index);
      }
    }

    // 闭包的特点：一个函数内部嵌套另一个函数，内部函数引用了外部函数的局部变量，这样就形成了闭包
    // 方法二:使用了闭包
    var btns = document.querySelectorAll('button')
    for(var i=0;i<btns.length;i++) {
      (function(index){
        btns[index].onclick=function(){
          console.log(index);
        }
      })(i);
    }


    // 方法三:使用了闭包
    var btns = document.querySelectorAll('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = (function(index){
        return function () {
          console.log(index);
        }
      })(i);
    }

 

转载于:https://www.cnblogs.com/lixiaoxue/p/11228390.html