闭包的使用 — 点击列表项输出项目索引

<ul id="list">
    <li>序号1</li>
    <li>序号2</li>
    <li>序号3</li>
    <li>序号4</li>
    <li>序号5</li>
    <li>序号6</li>
    <li>序号7</li>
    <li>序号8</li>
    <li>序号9</li>
    <li>序号10</li>
</ul>

 

var list = document.getElementsByTagName('li');
var listLen = list.length;

// 错误写法
for(var i=0;i<listLen;i++) {
  list[i].onclick = function () {
    // 每次输出都是10
    console.log(i);
  }
}

// 使用闭包一
for(var i=0;i<listLen;i++) {
  function msg(n){
    list[n].onclick = function () {
      console.log(n+1);
    }
  }
  msg(i);
}
msg = null;

// 使用闭包二
for(var i=0;i<listLen;i++) {
  (function msg(n) {
    list[n].onclick = function () {
      console.log(n+1);
    }
  })(i);
}
msg = null;

// 非闭包，使用属性进行保存
for(var i=0;i<listLen;i++) {
  list[i].i = i;
  list[i].onclick = function () {
    // 不能写成list[i].i
    console.log(this.i+1);
  }
}

$(function () {
  var li = $('li');
  // jquery写法
  li.click(function () {
    console.log($(this).index()+1);
  });
});