简单理解js闭包的概念,值得受益!

一、什么是闭包

在维基百科中的闭包:词法闭包的简称。是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。所以有另一种说法认为闭包是有函数和与其相关的引用环境组合而成的实体。WTF?什么鬼?

总体来说:闭包全局来讲一个函数可以访问它外部的成员,这个函数就可以称之为闭包函数。

闭包是通过改变JS回收机制保留某段作用域的一种手段。当一个函数执行完毕后,里面的局部变量是会被JS自带的垃圾回收机制给销毁的,从而释放内存。但是如果返回一个函数,而且函数里面有用到父级数声明的变量,那么此时,变量不会被回收,因为还有可能被用到,并且外界可以通过函数访问这段作用域下的变量。

例一:

 function foo(){
     var a = "我是foo里面的a";
 }
 foo();

这段代码执行后,其实a已经不存在了,因为foo执行完了之后foo的作用域消失了,所以作用域里面的变量不见了,被销毁了。在JS中存在自动垃圾回收,对不需要的变量或者没有使用的作用域进行定期清理。当foo执行完,函数内部的变量a没有在此作用域下任何地方再被引用,所以a变量的作用域会被JS内置垃圾收集器回收。

那么,我们需要用某种方法来获得foo里面的a,怎么办呢?
  
例二:

 function foo(){
     var a = "我是foo里面的a";
     return a;//将变量a给return出来 
 }
 let b = foo();//此时b就获得foo里面的a了。

此时,a是不是就获得了呢?并没有,我们得到的只是a的副本,假设我以某种方法修改了a的值,b不会发生任何变化。所以,我们并不是使用的foo内部的a。既然直接返回a不行,那么我们试试返回一个函数。

例三:

function foo(c){
    var num = c;
    return function A(){
        num++;
        return num;
    }
}
var b = foo(5);//b = A
b();//6
b();//7

是不是很奇怪,按道理每次都会返回6呀,怎么会每次叠加呢。其实不然,我们执行的是函数b(从foo返回出来的),并没有重新执行foo,所以也就不会每次给num重新赋值5。至于为什么会变成这种累加的情况呢,这是因为函数foo执行完后,其内部的的A函数里面对num有引用,所以foo的作用域以及变量a被保留在了函数A中,返回给了b。

现在,我们就能在外界通过函数b来访问foo内部的变量num了。这就是闭包,我们通过返回一个函数打通了函数内部与外界的桥梁。

二、闭包的作用

闭包可以解决的一个典型的问题就是循环绑定的问题,由于var声明的变量可以穿透作用域,所以如下的代码会出现问题。

例四:

<ul class="list">
      <li class="bloc">1</li>
      <li class="bloc">2</li>
      <li class="bloc">3</li>
      <li class="bloc">4</li>
      <li class="bloc">5</li>
 </ul>
  var ali = document.querySelectorAll('.wrap ul li')
  for(var i = 0,l = ali.length;i < l;i++){
   ali[i].onclick = function(){
        console.log(i)  //5 5 5 5 5
    }
  }

执行上面代码你会发现,当你点击任意li时,都会打印出5。这不对呀,和我们想的不一样呀,按道理点击第几个 li 就会打印出相应的下标呀。这是因为,我们绑定了五次onclik事件,无论你有没有触发后面的的函数,for循环都会执行,当你点击的时候,for循环已经执行完了,i 的值早已经变成了5。var 声明的i能够穿透作用域,每次触发点击事件时,函数内部的 i 也都是5。

那么,我们是不是应该想办法把每次循环时的 i 值保存下来呢,就好像每个点击事件都重新给一个新的 i 值。于是,通过闭包可以保存每次循环的 i 值,请看例子:

for(var i = 0,l = ali.length;i < l;i++){
     ali[i].onclick = (function(j){
         return function(){
              console.log(j)
         }
     })(i)
}

我们通过立即执行函数后返回了一个函数的形式,把每次循环的 i 值通过传参放到了不同的函数中,每个函数都是一个独立的作用域,每个函数都有了各自的i值,互相不影响,现在就如我们期望的一样了,点击第几个li打印出第几个 li 的下标。

使用闭包的注意的地方

①对捕获的变量只是个引用,不是复制
②父函数每调用一次,会产生不同的闭包
③循环中问题
闭包的应用场景:

1、保护函数内的变量的安全。

2、在内存中维持一个变量。

不经历风雨,怎能在计算机的大山之顶看见彩虹呢! 无论怎样,相信明天一定会更好!!!!!

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值