美文网首页
JS闭包和匿名函数

JS闭包和匿名函数

作者: Zoro_stack | 来源:发表于2016-09-07 01:26 被阅读0次

    研究了数小时的JS闭包,终于有所收获了,网上有很多关于闭包的研究,在这里我就只说说个人理解,如果有错误望指出加以改正!
    闭包的几个关键词:函数嵌套,自由变量,内部函数调用自由变量!
    直接上代码(困扰了我很长时间):

    var result = [];
    function fn() {
        for (var i = 0; i < 5; i++) {
          result[i] = function() {
            console.log(i);
          }
        }
    }
    fn();
    result[0]();
    result[1]();
    result[2]();
    

    相信很多人对这段代码并不陌生,打印结果肯定都是一样的都是5!
    解释如下:
    fn()函数调用完成后已经完成了遍历过程此时 i 已经递增到5了,但是此时由于闭包,内部的 i 并未销毁,于是调用result0可以取出 i 的值为5!
    那如何让其输出递增值呢?有很多方案,我只列出让我困扰了很久的其中一种!

     var result = [];
    function fn() {
        for (var i = 0; i < 5; i++) {
          result[i] = (function(n) {
            return function() {
              console.log(n);
            }
          })(i);
        }
    }
    fn();
    result[0]();
    result[1]();
    result[2]();
    

    分析:
    现在我们将此结构分为三层函数,最外层的fn,中间层的自执行的匿名函数,最里层的匿名函数。
    为何这样就可以输出递增值呢?其实很简单,中间层的自执行的匿名函数将自由变量 i 传入后保护了 i 不被外界改变,所以每次循环得到的 i 都被保护到中间层的自执行的匿名函数内了!
    经分析,这段小小的代码却包含了大量的JS知识啊,闭包以及自执行的匿名函数,真可谓经典!但同时也会发现闭包很是占用内存,至于优化方面还有待去学习!

    相关文章

      网友评论

          本文标题:JS闭包和匿名函数

          本文链接:https://www.haomeiwen.com/subject/ykhjettx.html