闭包及相关问题

先从闭包特点解释,应该更好理解.
闭包的两个特点：

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.

我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
但是有闭包特性的js函数有点特殊.
就例子来说:

function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();

这是个标准的闭包.在函数a中定义了函数b,a又return了b的值.这些可以先不管.
var c = a();
c();
这两句执行很重要.
在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
可是,如果我们再多执行一行.
var c = a();
c();
c();
第一次弹出0，第二次执行却弹出了1.

也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.

a是return过了,但是,a及内部值却依然存在,这就是闭包.

好了,总结下,
1，闭包外层是个函数.
2，闭包内部都有函数.
3，闭包会return内部函数，且内部函数访问了外层函数的变量。

闭包的应用场景

1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.

另外,还有一种格式:
(function(a,b){...})(a,b);
如果你使用过jquery,并且看过他的代码,会见到这种写法,这个应该叫匿名立即执行函数.用他的目的，是避免这个块内的变量和外面的变量名冲突。

闭包与变量： 

另外，作用域链的配置机制引出了另外一个问题，就是闭包只能取得包含函数中任何变量的最后一个值。闭包保存的是整个变量对象，而不是某个特殊的变量。如：

function create(){
  var result = [];
  for(var i=0;i<10;i++)
  {
     result[i]=function(){
        return i;
     };
  }
  return result;
}

执行result中的函数的结果都是10.
如果需要避免这个问题，可以修改下：

function create(){
  var result = [];
  for(var i=0;i<10;i++)
  {
     result[i]=function(num){
        return function(){
            return num;
        };
     }(i);
  }
  return result;
}

另外一个类似的栗子：

var obj={};
var events={"m1":"changed","m2":"clicked"};
for(var attr in events)
{
   obj[attr]=function(){
         alert(events[attr]);
   };
}

alert(obj["m1"]==obj["m2"];);//false
obj["m1"]();//"clicked"
obj["m2"]();//"clicked"

 

 

闭包与this:

 在闭包中使用this也会导致问题。this对象是在运行时基于函数的执行环境绑定的。

var name="The Window";
var myObject={
  name:"My Object",
  sayNameFunction:function(){
    return function(){
      return this.name;
    };
  }
};

alert(myObject.sayNameFunction()());//The Window

解决方法是保存一下this对象：

var name="The Window";
var myObject={
  name:"My Object",
  sayNameFunction:function(){
    var that = this;
    return function(){
      return that.name;
    };
  }
};

alert(myObject.sayNameFunction()());//My Object

 

 静态私有变量

(function(){
  var name;
  Person=function(value){
    name=value;
  };
  Person.prototype.getName=function(){
    return name;
  };
  Person.prototype.setName=function(value){
    name=value;
  };
})();

var person1=new Person("Rose");
person1.setName("Mike");
alert(person1.getName());//Mike

var person2=new Person("Van");
alert(person1.getName());//Van
alert(person2.getName());//Van

name 相当于静态私有变量，被各实例共享。

转载于:https://www.cnblogs.com/linda586586/archive/2012/08/20/2648059.html