闭包以及闭包的应用详解

闭包

  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. 闭包的用途
一个是前面提到的可以读取函数内部的变量,
另一个就是让这些变量的值始终保持在内存中,不会在外层函数调用后被自动清除。0

  • 实现公用变量
    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就相当于一个隐式的存储结构

  • 可以实现封装,属性私有化
  • 模块化开发,防止污染全局变量
  1. 闭包的注意点
    (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]();
}

tip:>(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)

发布了13 篇原创文章 · 获赞 23 · 访问量 2895

猜你喜欢

转载自blog.csdn.net/pz1021/article/details/104866619