博客

什么是闭包？及定义和使用

想必好多前端开发者对于 闭包 都不陌生，也是面试中经常被问到的问题之一。

先看看官方对闭包的解释：一个拥有许多变量和绑定了这些变量的环境的表达式的一部分。哎呀呀~说的好像有点抽象。以下是个人结合开发经验的理解：

因为javascript语言是允许一个外部函数里可以定义一个内部函数的。

简单说闭包：也就是一个函数可以定义在另一个函数体内。并且这个内部函数是可以访问外部函数里定义的局部变量。

再简单点就是 ：一个函数里套一个函数。（闭包是定义在一个函数内部的函数）

当这个内部函数在包含它外部函数之外被调用时，就形成了闭包。

下面看看闭包的写法：


先看看这种写法


看上去是对象里定义了函数，在javascript中万物皆对象，其实函数也是对象的一种。

    var obj1 = {
      hello:1,
      btn1:function(w1){
        //这里的this指向是obj1对象哈（说明下：当函数作为某个对象的方法调用时指的        是当前对象哈~后面有空会发一个this指向的博客）
        console.log("闭包1:",this.hello+w1 );
        return this.hello+1 ;
      }
    }
    obj1.btn1(1);
     //闭包1: 2

这种写法好像和上面的区别不大哈，new个对象，在给对象添加属性和方法

    var obj2  = new Object();
    obj2.hello = 1;
    obj2.btn2 = function(w2){
      console.log("闭包2:",this.hello+w2)
      return this.hello+w2
    }
    obj2.btn2(2)
    //闭包2: 3

这种就比较直观 了，就是函数里套函数啦~

   function btn3(){
     var w3 = 10
     function btn4(){
       console.log("闭包3:",w3)  //10
   }

闭包理解为一个外部函数里定义一个内部函数，并且内部函数可以拿到外部函数的局部变量，那么如果调外部函数想拿内部函数里的变量怎么办


（btn3函数里包含了btn4函数，此时btn3函数里所有定义的局部变量，btn4函数都可以直接拿来用，那么btn4则不可以拿到btn3的变量，怎么解决看下面例子）

    function btn3 (){
    var w3=10
    function btn4(){
      var b=4
      // var b=b+w3
      console.log("闭包3:",b) //14
     }
    return btn4
   }
   var a = btn3()
   a()

把btn3函数作为btn4的返回值抛出去。


或者也可以这么写，返回出去一个匿名函数在自执行一下。我觉得闭包和作用域是离不开的，理解闭包首先也要理解作用域，作用域又分为，局部作用域，全局作用域，还有链式作用域，有机会在说作用域啦。。。

   function btn3 (){
     var w3=10
     return function (){
       console.log("闭包3:",w3) 
     }
   }
  btn3()()

总而言之，我理解的闭包简单说就是函数里定义一个函数，外部函数里定义一个内部函数，闭包就是在内外函数做了个衔接，使得内外部函数的局部变量可以拿到。

如果有不同理解和好的建议的。

可以一起分享，一起进步。