闭包以及闭包的应用详解

闭包

来自红宝书的定义:
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数

1. 理解闭包，首先的了解JavaScript的作用域的特点
javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。
注意点：在函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明的是一个全局变量！
有权访问另一个函数作用中的变量的函数
自己的闭包理解：闭包只是一种现象 ,内部函数可以使用外部函数环境中的变量,什么时候会产生闭包的现象呢
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。


function f1(){
   

  　　　　var n=999;
  
  　　　　function f2(){
   
          console.log(n); // 999
  　　　　}
       return f2()
  　　}
  f1 ()

这个代码就形成了闭包的现象
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

闭包的小应用

function a() {
   
  var num = 100;
  function b () {
   
    num ++;
    console.log (num);
  }
return b;
}
var demo = a();
demo() ;//101
demo() ;//102

执行demo()得到的是什么呢?

第二个闭包的例子


function a() {
   
  function b() {
   
    var bbb = 234;
    console.log(aaa);
  }
  var aaa = 123;
  return b;
}
var glob = 100;
var demo = a();
demo();

来看看运行结果吧

具体执行,看看这个图

2. 闭包的用途
* 一个是前面提到的可以读取函数内部的变量，* 另一个就是让这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。

实现公用变量
eg:函数累加器

function add( ) {
   
    var count = 0;
    function demo() {
   
    count ++;
    console.log (count);
    }
    return demo ;
  }
    var counter = add() ;
    counter() ;
    counter() ;
    counter() ;
    counter() ;
    counter() ;

可以做缓存

 function test() {
   
      var num=100;
      function a () {
   
      num ++;
      console . log(num) ;
      }
      function b () {
   
      num --
      console.log(num) ;
      }
      return [a,b];
      }
      var myArr = test( ) ;
      myArr[0]();
      myArr[1]();

其实过程是这样的

体现缓存的例子

function eater() {
   
  var food = '';
  var obj = {
   
    eat: function () {
   
      console.log("i am eating " + food);
      food = '';
    },
    push: function (myFood) {
   
      food = myFood;
    }
  }
  return obj;
}
var eater1 = eater();
eater1.push( ' banana' ) ;
eater1.eat() ;

这个时候ester里面的food就相当于一个隐式的存储结构

可以实现封装,属性私有化

function Sun(name, wife) {
   
    var prepareWife = "xiaozhang";
    this.name = name;
    this.wife = wife;
    this.divorce = function () {
   
        this.wife = prepareWife;
    }
    this.changePrepareWife = function (target) {
   
        prepareWife = target;
    }
    this.sayPraprewife = function () {
   
        console.log(prepareWife);
    }
}

var deng = new Deng('deng', 'xiaoliu');
deng.prepareWife //undefined
deng.sayPraprewife() //xiaozhang

模块化开发，防止污染全局变量

闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

来看看闭包的题目吧

 // }

        // test();
        function test() {
   
            var arr = [];
            for (var i = 0; i < 10; i++) {
   
                arr[i] = function () {
   
                    console.log(i);
                }  
            }
            return arr;
        }

        var myArr = test();
        for (var j = 0; j < 10; j++) {
   
            myArr[j]();
        }
        //打印的是10个10,因为在函数10函数执行的时候上面的循环已经结束了,这个时候i已经变成了10啦

But,我们一般要避免这个闭包这么实现呢,现在我们需要的是输出0-9,上面的代码该怎么改呢???
实际上我们利用闭包和立即执行函数就能解决这个问题,被放进数组里面的函数保存到外部执行的时候,在作用域链上找j的时候都会使用立即执行函数中j,而每次循环立即执行函数都会被销毁


function test() {
   
    var arr = [];

        for (var i = 0; i < 10; i++) {
   
           ( function (j) {
   
            arr[j] = function () {
   
                console.log(j);
            }
            }(i))   
        }
    return arr;
}

var myArr = test();
for (var j = 0; j < 10; j++) {
   
    myArr[j]();
}