setTimeout 形成闭包问题

江无花
  • 62

操作步骤

尝试分别在两秒内点击两按钮

问题

  • 下列代码输出结果是什么?
  • 为什么?

<button id="btn">Click</button>
<button id="btn2">Click2</button>
<script>
  // 尝试分别在两秒内点击两按钮

  function test() {
    var count = 1
    return function () {
      setTimeout(() => {
        count++
        console.log(count)
      }, 2000)
    }
  }

  function test2() {
    var count = 1
    setTimeout(function () {
      count++
      console.log(count)
    }, 2000)
  }

  document.getElementById('btn').onclick = test()
  document.getElementById('btn2').onclick = function () {
    test2()
  }
</script>

结果

Click 按钮两秒内点击三次情况。

image.png

Click2 按钮两秒内点击三次情况。

image.png

个人理解及疑惑

Click按钮 两秒内点击三次,输出结果为 2,3,4 ,这个是因为形成闭包,被外部引用,所以不会被 v8 的垃圾回收机制回收,自然 count 值也会被保存下来。

主要有疑问是 Click2按钮 , 为什么会输出结果为 2, 2, 2,在我的理解,var 定义变量有变量提升作用,所以每次 setTimeout 会改变函数 test2 作用域内的 count 值,所以理想结果应该为 2, 3, 4

欢迎各路大佬来解答, 小弟先谢为敬。

回复
阅读 456
4 个回答

btn2值为一个匿名函数每次点击调用, 函数内部调用test2但是没有储存test2的引用, 那么test2执行完成之后就会被垃圾回收机制回收, 其实每次执行test2都重新创建了count变量并赋值为1

test2 每次执行都重新定义了一个 该函数内部作用域内的 新的 count 1

  document.getElementById('btn').onclick = test()

这里会执行一次test();以后你每次点击都是执行return function(){...}这个函数,这里面的count是闭包引用。

 document.getElementById('btn2').onclick = function () {
    test2()
  }

而这个,每次点击都是执行test2();count被初始化了。

首先这里没有出现变量提升,而是用到了作用域链,function在声明的时候会创建自己的上下文,setTimeout里面的回调只是引用了上一层作用域链中的变量

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏