JavaScript闭包

举报
十八岁讨厌编程 发表于 2022/08/06 23:54:37 2022/08/06
【摘要】 文章目录 引入什么是闭包常见的闭包闭包的作用闭包的生命周期 引入 假设现在我们有一个需求:网页中有三个按钮,我们想要点击一个按钮的时候,网页会显示他是第几个按钮。 思路:遍历+ 监听 ...

引入

假设现在我们有一个需求:网页中有三个按钮,我们想要点击一个按钮的时候,网页会显示他是第几个按钮。

思路:遍历+ 监听

 var btns = document.getElementsByTagName('button')
  for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    btn.onclick = function () {
      alert('第'+(i+1)+'个')
    }
  }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

如果写成for (var i = 0; i < btns.length; i++),那么在每次循环的时候都会计算一遍btn.length会影响代码效率

这么写是错误的,因为这个程序会用循环为每一个按钮绑定事件,而再去用鼠标点击去触发这个事件的时候,其实循环早已经执行完毕了。而执行完毕就意味着这个i就是2(这个i是全局变量)。也就是说不管你点击的哪个按钮,网页都会显示它是第3个按钮。

我们可以使用添加属性的办法,去记录他的下标:

for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    //将btn所对应的下标保存在btn上
    btn.index = i
    btn.onclick = function () {
      alert('第'+(this.index+1)+'个')
    }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

我们也可以用闭包的原理来做:

for (var i = 0,length=btns.length; i < length; i++) {
    (function (j) {
      var btn = btns[j]
      btn.onclick = function () {
        alert('第'+(j+1)+'个')
      }
    })(i)
  }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

什么是闭包

首先我们来看一段代码:

function fn1 () {
    var a = 2
    var b = 'abc'
    function fn2 () { //执行函数定义就会产生闭包(不用调用内部函数)
      console.log(a)
    }
  }
  fn1()

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1. 如何产生闭包?
  • 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
  1. 闭包到底是什么?
  • 使用chrome调试查看
  • 理解一: 闭包是嵌套的内部函数
  • 理解二: 包含被引用变量(函数)的对象
  • 注意: 闭包存在于嵌套的内部函数中
  1. 产生闭包的条件?
  • 函数嵌套
  • 内部函数引用了外部函数的数据(变量/函数)
  • 调用了外部函数

在这里插入图片描述
理解一就是把红色部分当作闭包
理解二就是把绿色部分当作闭包(Closure就是闭包的意思)

常见的闭包

常见的闭包有两种情景:

  • 将函数作为另一个函数的返回值
  • 将函数作为实参传递给另一个函数调用

①将函数作为另一个函数的返回值

// 1. 将函数作为另一个函数的返回值
  function fn1() {
    var a = 2
    function fn2() {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意:

  • 整个过程只产生了一个闭包
  • 闭包个数与产生内部对象有关,所以我们可以通过调用了几次外部函数来判断闭包个数。
  • 当执行到var a=2的时候闭包就已经产生了,因为函数声明会提升。

②将函数作为实参传递给另一个函数调用

// 2. 将函数作为实参传递给另一个函数调用
  function showDelay(msg, time) {
    setTimeout(function () {
      alert(msg)
    }, time)
  }
  showDelay('NEFU', 2000)

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意:

  • msg是被引用对象,也就是说msg是闭包,而time不是
  • 因为内部的嵌套函数时function{}那个括号里的,而time不在里面

闭包的作用

闭包的两大作用:

  • 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
  • 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

我们可以分析以下代码:

function fn1() {
    var a = 2
    function fn2() {
      a++
      console.log(a)
      // return a
    }
    function fn3() {
      a--
      console.log(a)
    }
    return fn3
  }
  var f = fn1()
  f() // 1
  f() // 0

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

问题一:函数执行完后, 函数内部声明的局部变量是否还存在?
答:一般是不存在的,存在于闭包中的变量才可能存在。就如同上面的代码因为有var f = fn1()这一句话,使对象(原来被fn3指着的对象)没有因为函数的执行结束而被销毁(因为现在有f指着他,导致他不会被销毁)。

问题二:在函数外部能直接访问函数内部的局部变量吗?
答:不能, 但我们可以通过闭包让外部操作它

闭包的作用有点类似于java中的对象的封装性。你可以将fn1当作类,将a、fn2、fn3当作对象的属性和方法。只不过这里是通过return来暴露内部方法,而java是通过权限修饰符来进行暴露。

闭包的生命周期

  • 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
  • 死亡: 在嵌套的内部函数成为垃圾对象时

例如以下代码:

function fn1() {
    //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
    var a = 2
    function fn2 () {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4
  f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

如果换一种声明方式:

function fn1() {
    var a = 2
    //如果这样声明,则此时才会产生闭包
    var fn2 = function fn2 () {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4
  f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/124114957

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。