js-闭包

一、闭包的概念

闭包官方给出的解释：闭包是函数和声明该函数的词法环境的组合。

下面我们举一个经典的且最简单的闭包demo

function closure(){
     var a=4;
     function clo(){
         console.log(a)
     }
     clo(); 
 }
 closure();

从上面的例子中，我们可以看出闭包需要的三基本个条件是：1.一个外层函数。2.一个内部函数。3.局部变量。

二、闭包的用途

要理解闭包的用途首先要理解javascript的特殊的变量作用域。

变量的作用域只有两种：全部变量和局部变量。而javascript语言中，函数内部可以直接读取全局变量，但是函数外部无法读取函数内部的局部变量。

而我们需要用到的闭包的场景就是：我们需要一个外部不可以直接访问一个函数内部变量的的环境。因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。比如：插件封装，面向对象编程等。

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

1.DOM中使用闭包实例

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>


function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);


document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

2.用闭包模拟私有变量

 function closure2(){
    var pCounter=0;
    function changeBy(val){
      pCounter += val;
    }
    return{
        add:function(){
            changeBy(1)
        },
        reduce:function(){
            changeBy(-1)
        },
        value:function(){
           return pCounter
        }
    }
 }
 var counter1= closure2();
 var counter2 = closure2();
 console.log(Counter1.value());
 Counter1.add();
 Counter1.add();
 console.log(Counter1.value()); /* logs 2 */
 Counter1.reduce();
 console.log(Counter1.value()); /* logs 1 */
 console.log(Counter2.value()); /* logs 0 */

每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

三、闭包的缺点

1.缺点一：变量发生变化

   function arr(){
           var res=new Array();
           for (var i = 0; i< 10; i++){
              res[i]=function(){
                  console.log(i);
              }
           }
           return res;
       }
      var arr1=arr();
      arr1[0]();//10
      arr1[1]();//10

因为闭包里面的函数调用发生在for循环结束之后,此时变量i的值是10，且res组成的闭包集合共用一个词法环境里面的变量i，因此每个闭包所输出的值都是10。

解决此类情况的方式：
a.使用立即执行函数

   function arr(){
        var res=new Array();
        for (var i = 0; i< 10; i++){
            res[i]=(function (num) {
                return function(){
                    console.log(num)
                }
            })(i)
        }
        return res;
      }
      var arr1=arr();
      arr1[0]();//0
      arr1[1]();//1

b.使用es6中的let

function arr(){
     var res=new Array();
     for (let i = 0; i< 10; i++){
        res[i]=function () {
                console.log(i)
        }
     }
     return res;   
   } 
   var arr1=arr();   
   arr1[0]();//0   
   arr1[1]();//1

这两种方式的共性就是把变量i,变成了每个函数的局部变量，因此在执行闭包的时候，局部变量i不会发生变化。

2.缺点二：this指向问题

   var obj = {
     name:"this",
      getName:function() {
         return function () {
             console.log(this.name)
         }
     }  
   }  
   var arr= obj.getName();  
   arr()//undefined

this指向当前调用函数的上下文，arr函数创建在全局环境中，所以在调用arr时，在非严格模式的浏览器环境中this指向window，在严格模式下this是undefined，而这两种情况下都没有一个全局的name,所以函数的执行结果为undefined。

3.缺点三：内存泄漏

function  showId() {
    var el = document.getElementById("div1")
    el.onclick = function(){
      console.log(el.id)   // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
    }
}


// 改成下面
function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      console.log(id)   // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
    }
    el = null    // 主动释放el
}

当闭包中引用了全局变量时，记得在引用完之后进行释放，避免造成内存泄漏。