闭包

作者: 芒果二十 | 来源:发表于2019-03-20 17:52 被阅读0次

    什么是闭包

    当内部函数被返回到外部保存,会形成闭包。
    闭包有权独写父级函数所定义的变量。一般情况下,当一个函数执行完毕时,会释放该函数占用的内存,但是一旦形成闭包,父级函数的变量将存在于内部函数的作用域链中,这些变量无法在父级函数执行结束后被销毁。
    所以说闭包造成内存泄漏,使父级函数的作用域链不被释放

        var arr = []
        function test() {
          for (var i = 0; i < 10; i++) {
            // function 存入arr中
            arr[i] = function () {
              document.write(i + ' ')
            }
          }
        }
        test()
        for (var j = 0; j < arr.length; j++) {
          // 执行arr中的function,输出结果为十个10
          arr[j]()
        }
    

    以上代码片段输出结果为十个10,这就是因为闭包所导致的。
    test函数中只是声明了一个匿名函数,这个函数并没有立即执行,for循环只是将这个函数push进数组中。当test函数执行完毕时,i的值为10,数组中函数的执行结果就都是10

    要想解决上述闭包产生的问题,就得引入另外一个闭包,立即执行函数来解决

        var arr = []
        function test() {
          for (var i = 0; i < 10; i++) {
            // 解决闭包问题
            (function (j) {
              arr[j] = function () {
                document.write(j + ' ')
              }
            }(i))
          }
        }
        test()
        for (var j = 0; j < arr.length; j++) {
          // 执行arr中的function
          arr[j]()
        }
    

    闭包的作用

    1.闭包实现共有变量,如函数累加器

    /* 闭包实现函数累加器*/
      function add () {
        var num = 0
        function a () {
          document.write(++num)
        }
        return a
       }
    
      var myAdd = add()
      myAdd()
      myAdd()
    

    闭包经典面试题

    点击li获取对应下标

    /* 闭包经典 点击li获取相应的index*/
      var li = document.getElementsByTagName('li')
      for (var i = 0; i < li.length; i++) {
        (function (j) {
          li[j].onclick = function () {
            console.log(j)
          }
        }(i))
        /*
        相同解决思路,不同的写法
         */
        li[j].onclick = (function () {
          return function () {
            console.log(j)
          }
        })
         */
      }
    

    相关文章

      网友评论

          本文标题:闭包

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