5.Javascript闭包得实现原理和作用

闭包的实现原理和作用

1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。

2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理

因为函数内部声明 的变量是局部的，只能在函数内部访问到，但是函数外部的变量是对函数内部可见的，这就是作用域链的特点了。

子级可以向父级查找变量，逐级查找，找到为止

 function  bar(){
         //外层函数声明的变量
         var value=1;
 
         function foo(){
             console.log(value);
         }
         return foo();
     };
     var bar2=bar;
     //实际上bar()函数并没有因为执行完就被垃圾回收机制处理掉
     //这就是闭包的作用，调用bar()函数，就会执行里面的foo函数，foo这时就会访问到外层的变量
     bar2();

因此我们可以在函数内部再创建一个函数，这样对内部的函数来说，外层函数的变量都是可见的，然后我们就可以访问到他的变量了。

3、闭包的优点：

• 方便调用上下文中声明的局部变量
• 逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题

4、闭包的缺点：

因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大

实际开发中JS闭包的应用

1。在函数外使用函数内的变量 .函数作为返回值   （闭包作用：避免变量被环境污染）

 function F1(){
   var a = 100;
     return function(){
       console.log(a)
     }
 }
 var f1 =F1();
 var a = 200;
 f1()//100

 function init(){
     var name = "hello world";//name是一个被init创建的局部变量
     function sayName(){//sayName是一个内部函数，闭包
         alert(name);//使用了父级函数声明的变量name
     }
     sayName();
 }
 init();//"hello world"

2.函数作为参数传递

 function F1(){
    var a = 100;
     return function(){
       console.log(a)
     }
 }
 var f1 =F1();
 function F2(fn){
   var a = 200;
      fn();
 }
 F2(f1)；  // 100

3.将函数与其所操作的某些数据关联起来，通常，你使用只有一个方法的对象的地方，都可以使用闭包

 // 改变dom样式
 document.getElementById("a").onclick = setSize(12);
     document.getElementById("b").onclick = setSize(18);
     document.getElementById("c").onclick = setSize(22);
     function setSize(fontSize){
         return function(){
             document.body.style.fontSize = fontSize + 'px';
         }
     }

4.用闭包模拟私有方法

 //这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。
 var makeCounter = function () {
         var privateCounter = 0;
         function changeBy(val){
             privateCounter += val;
         };
         return {
             increment: function(){
                 changeBy(1);
             },
             decrement: function(){
                 changeBy(-1);
             },
             value: function(){
                 return privateCounter;
             }
         }
     };
     var Counter1 = makeCounter();
     var Counter2 = makeCounter();
     Counter1.increment();
     console.log(Counter1.value());//1 每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。
     console.log(Counter2.value());//0 以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。

5.循环里面的闭包

怎么才能实现输出0-5呢？

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

//方法一，makeCallback函数为每一个回调创建一个新的词法环境。
function makeCallback(i) {
     return function() {
        console.log(i)
      };
    }
    for(var i=0;i<10;i++){
        setTimeout(makeCallback(i),1000)
    }

//另一种方法使用了匿名闭包
for(var i=0;i<10;i++){
        (function(i){
            setTimeout(function () {
                console.log(i)
            },1000)
        })(i)
    }

 //使用let声明变量
 for (let i = 0; i < 5; i++) {
   setTimeout(function () {
     console.log(i);
   }, 1000 * i);
 }