army8735

上午看到无忧脚本里一个闭包的小讨论贴，下午就碰到blue来说一个js问题。眼不转头不抬回了句：“代码不全。”结果才发现，是我智商不全。

举个小例子：

<ul>
  <li id="a1">1</li>
  <li id="a2">2</li>
  <li id="a3">3</li>
</ul>

写个代码：

for(var i = 0; i < 4; i++) {
  var oLi = document.getElementById("a" + i);
  oLi.onclick = function() {
    alert(i);
  }
}

你会认为每个li元素分配的点击事件是弹出各自的序号吗？如果答案是“是”，那么答案就错了。最终结果会是，所有弹出的均是4，根本不是1、2、3。因为i的变量只保存了一个，每个li弹出的都是i，i最后是4，并非我们所想每个li元素会保存自己的序号。

再来看blue给的代码：

function User( properties ) {
  //遍历对象属性，确保它作用域正确(如前所述)
  for ( var i in properties ) {
    //为属性创建获取器
    this[ "get" + i ] = function() {
      return  properties[i];
    };
    //为属性创建设置器
    this[ "set" + i ]  = function(val) {
      properties[i] = val;
    };
  }
}
//创建一个新user对象实例，传入一个包含属性的对象作为种子
var user = new User({
  name:  "Bob",
  age: 44
});
//请注意name属性并不存在，因为它在properties对象中，是私有的
alert(  user.name == null );
//然而，我们能够使用用动态生成的方法getname来访问它
alert( user.getname()  == "Bob" );
//最后，我们能看到，通过新生成的动态方法设置和获取age都是可以的
//user.setage( 22  );
alert( user.getname());

最终会弹出什么？false、true和啥？当然不是Bob，会是44，这个原理和上面那个是一样的。

user.getname()中的那个i，在循环的时候确实是等于”name”，于是this["get" + i]为类本身赋予了一个getname的方法，返回name的属性值，也就是Bob。可是在循环下一个的时候，i变成了age，于是return properties[i]也变成了return properties["age"]了，这就是原因所在。

既然知道为什么了，那么有希望拯救吗？

当然有！

一种方法是将变量存到别的地方上去，比如开头的那个例子将序号存到元素的name属性上；当然技巧性的就是使用闭包了。

function User( properties ) {
  for ( var i in  properties ) {
    this[ "get" + i ] = (function(s) {
      return  function() {
        return  properties[s];
      }
    })(i);
    this[ "set" + i ] = function(val)  {
      properties[i] = val;
    };
  }
}
var user = new  User({
  name: "Bob",
  age: 44
});
alert(  user.getname());

试一试，效果如何？通过匿名函数的方法，将变量存到实参上面，如此就保存了每个变量，防止最后被替换掉。&