关于闭包

   在刚开始入门前端的时候,就经常听一些大神们提到闭包啊闭包……当时就觉得是一个很高逼格的东西……等学到js的时候,问:我这个代码为什么错了呀,答:因为这是一个闭包。我顿时恍然~终于让我给碰上了!
下面是我的一些理解,如若有不全面的地方,欢迎留下宝贵意见!

闭包究竟为何物

   在js中,必不可少的两大人物就是变量函数。通过函数操作变量,得到我们想要的效果。而函数都是有作用域的,就像管辖范围一样,我在我的地盘活动,不能向别人的地盘伸手。同样,一般而言,函数只能操作自己作用域内的变量,不能干预别人的作用域。然而闭包就是一个特例!闭包是指有权访问另一个函数作用域中的变量的函数。

先来看看函数

定义函数的方式有两种:

  • 函数声明
    function functionName(arg0,arg1,arg2){
        //函数体
      } 
  • 函数表达式
    var functionName=function(arg0,arg1,arg2){
         //函数体
      }
创建闭包
  常见方式为在一个函数内部创建另一个函数。
  function aaa(){
           var a=1;
           return function(){
            alert(a++);
          }
  }
  aaa();//1 执行后a++,然后a还在
  aaa();//2

这是因为闭包会使变量始终保存在内存中。
上面这样在一个函数内部嵌套一个匿名函数就已经算是一个闭包啦!
下面我们就来具体说一说……
  
  如何在函数外取到函数内的变量

  function outer(){
    var x=10;
    return function(){  //函数嵌套函数
      x++;
      alert(x);
    }
  }
  var y=outer();  //将内部返回的函数赋给y,相当于:
  //y= function(){  
  //    x++;
  //    alert(x);
  //  }
  y();  //y函数第一次调用,相当关于outer()();结果为11
  y();  //y函数第二次调用,结果为12,实现了累加

  这里,我们在outer函数的外部,通过返回outer内部嵌套的匿名函数来获取outer作用域内的变量x。我知道这个时候你一定想问,那outer函数的执行都已经结束了啊,不就应该销毁内部所有的局部变量么?为什么内部函数还能访问到x?下面我们来一一解惑。
  首先,我们就暂且称outer所包含的内部函数为小匿。小匿在自己的作用域中访问了外部函数outer中的变量x。即使小匿被返回了,而且是在其他地方被调用了,但它仍然可以访问变量x。之所以能够访问这个变量,是因为小匿的作用域链中包含outer的作用域。那么这又牵扯出一个新的问题,作用域链又是什么呢?
  当某个函数被调用时,会创建一个执行环境,及相应的作用域链。我个人理解为,每一个函数在执行的时候会,都会吹一个泡泡把自己包在里面,这个泡泡就是执行环境,然后泡泡里面有一个整齐摆放的工具箱,那就是作用域链。函数在泡泡里面工作(执行)的时候,需要操作的数据(也就是变量),都在工具箱里按照严格的等级以此摆放。那么那些等级又是怎么划分的呢?像形参、函数内局部变量、arguements等这些都称为活动对象。而这个函数作用域链上的活动对象不仅是自己的,还有父亲的,祖父的。但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动和对象处于第三位……自己的活动对象永远都是第一位的。函数执行完成后,泡泡破灭,活动对象该释放的就会释放掉。
  闭包有三个特性:
  1.函数嵌套函数
  2.函数的内部可以引用外部的参数和变量
  3.参数和变量不会被垃圾回收机制回收
下面我们来看一个闭包中最常见也是最典型的问题:闭包与索引值问题

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

从表面来看,似乎每个函数都应该返回自己的索引值,即最后调用每一个result[i]并alert,感觉会弹出0~9,但实际会弹出10个10。因为实际的执行的时候,循环只会给每一个result[i]附一个函数,里面的i并不会同时赋值,只有在真正执行这个函数的时候,也就是要用到i的时候才开始给它赋值。而这个时候,循环已经跑完,i已经=10,所有会是10个10;
  但我们可以通过创建另一个匿名函数强制让闭包的行为符合预期。

 function(){
    var result=new Array();
    for(var i=0;i<10;i++){
      result[i]=function(num){
         return function(){ 
           return num;
         };
      }(i);
    }
     return result;
 }
 函数外:
  alert(result(0)());//0
  alert(result(1)());//1
  ……

由于函数参数是按值传递的,所以会将变量i的当前值复制给参数num。而在这个匿名函数内部又创建并返回了一个访问num 的闭包。这样一来,result数组中每个函数都有自己num变量的一个副本,因此可以返回不同是数值。

闭包的使用场景
1.创建命名空间

//全局变量,test1是全局变量
var test1=111 
function outer(){
    alert(test1);
}
outer(); //111
alert(test1); //111



//闭包,test2是局部变量,这是闭包的目的
//我们经常在小范围使用全局变量,这个时候就可以使用闭包来代替。
(function(){
var test2=222;
function outer(){
    alert(test2);
}
function test(){
    alert("测试闭包:"+test2);
}
outer(); //222
test(); //测试闭包:222
}
)(); 
alert(test2); //未定义,这里就访问不到test2

2.给对象设置私有属性并利用特权(Privileged)方法访问私有属性

var Foo = function(){
      var name = 'fooname';
      var age = 12;
      this.getName = function(){
          return name;
      };
      this.getAge = function(){
          return age;
      };
  };
  var foo = new Foo();

  foo.name;        //  => undefined
  foo.age;         //  => undefined
  foo.getName();   //  => 'fooname'
  foo.getAge();    //  => 12

3..函数外或在其他函数中访问某一函数内部的参数

function f1(){
    var test=111;
    tmp_test=function(){return test;} //tmp_test是全局变量,这里对test的引用,产生闭包
}

function f2(){
    alert("测试一:"+tmp_test());
    var test1=tmp_test();
    alert("测试二:"+test1);
}
f1();
f2();
//测试一:111
//测试二:111
alert(tmp_test()); //111
tmp_test=null;

4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数

//无法传参的情况
var parm=222;
function f1(){alert(111)}
function f2(obj){alert(obj)}
setTimeout(f1,500);//正确,无参数
setTimeout(f2,500);//undefined,传参失败
setTimeout(f2(parm),500);//参数无效,传参失败
setTimeout(function(parm){alert(parm)},500);//undefined,传参失败

//正确做法,使用闭包
function f3(obj){return function(){alert(obj)}}
var test2=f3(parm);//返回f3的内部函数的引用
setTimeout(test2,500);//正确,222
document.getElementById("hello").onclick=test2;//正确,222
document.getElementById("hello").attachEvent("onclick",test2);//正确,222

5.记住索引

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

小结
  虽然闭包可以通过另一个函数访问这个函数的局部变量。但由于闭包会携带包含他的函数的作用域,因此会比其他函数占用更多的内存,由于不同的垃圾收集方法,使用不当会造成内存泄露,也就是无法销毁驻留在内存中的元素。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值