javascript的闭包closure整理

时间:2020-12-23 22:48:30

var name = "Window";
var object = {
   name : "Object",
   getNameFunc : function(){
      return function(){
       return this.name;
      };
   }
};
  alert(object.getNameFunc()() );

结果是window
var name = "Window";
var object = {
   name : "Object",
   getNameFunc : function(){
return this.name;
   }
};
  alert(object.getNameFunc());
结果是object

var name = "Window";
var object = {
name : "Object",
getNameFunc : function(){
var that = this;
return function(){ 
return that.name;
};
}
};
alert(object.getNameFunc()() );

结果是object



闭包整理过程中遇到一个问题,目前暂时理解无能,先写下来答案,能明白再来更新


只要存在调用内部函数的可能,JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量,直到最后一个变量废弃,JavaScript的垃圾收集器才能释放相应的内存空间

再来一个比较常见的问题

var spans = $("span");
for (var i = 0; i < spans.length; i++) {
spans[i].onclick
= function() {
alert(i);
}
}
点击span后每次弹出的都是相同的值    spans.length

为什么呢?

为i赋值的操作我们可以理解为外部函数,onclick函数理解为内部函数,i=spans.length时外部函数停止执行。

当点击时,调用内部的click函数,此时内部函数可以访问外部函数的变量i,但是i此时为spans.length,所以才会出现上面的结果


正确的解决方案如下

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