闭包

2019-03-20  本文已影响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)
      }
    })
     */
  }
上一篇下一篇

猜你喜欢

热点阅读