JavaScript中调用counter时变量i未重置的原因咨询

这是JavaScript里闭包在起作用，咱们一步步拆解你的代码执行过程，就能明白为啥i会一直递增了：

首先看你的代码：

function makeCounter() { 
  var i = 0; 
  return function() { 
    console.log( ++i ); 
  }; 
} 
var counter = makeCounter(); 
counter(); //输出为1 
counter(); //输出为2 
counter(); //输出为3...

关键执行步骤： #

• 当你执行var counter = makeCounter();这一行时，makeCounter函数只被调用了一次：这时候里面的var i = 0;会执行，创建了一个值为0的变量i，然后makeCounter返回了它内部定义的匿名函数。
• 重点来了：这个返回的匿名函数会“记住”它被创建时所在的makeCounter函数的作用域——也就是那个i变量所在的环境。哪怕makeCounter执行完了，这个作用域并不会被销毁，因为返回的函数还在引用它。
• 之后你每次调用counter()，其实是在调用这个匿名函数，这时候不会重新执行makeCounter里的代码（包括var i = 0;这一步），而是直接去访问之前已经创建好的那个i变量，每次执行++i都会让它的值递增，所以控制台输出会越来越大。

对比验证：如果想每次重置i该怎么做？ #

要是你希望每次调用都输出1，那每次都得重新调用makeCounter来创建新的作用域和新的i变量：

makeCounter()(); // 输出1
makeCounter()(); // 输出1
makeCounter()(); // 输出1

因为每次调用makeCounter()都会重新执行var i = 0;，返回的新函数引用的是新的i变量，所以每次都是从0开始递增。

内容的提问来源于stack exchange，提问作者TheLemonSong