函数范围变量是不可写的

Question

function add() {
    var counter = 0;
    counter += 1;
    return counter
} 

为什么计数器变量在第一次迭代后不会增加？总是输出1.

Answer 1

该add函数返回counter在函数内定义的变量add.变量的范围counter是函数的局部变量,这意味着每次调用函数时,它都会创建一个新变量counter,然后初始化为零,然后递增计数器.

如果您正在寻找计数器实现,那么您需要counter每次引用相同的变量并增加该变量.这可以通过使用闭包来实现.

示例:在下面的示例中,有2个函数,1个嵌套在另一个函数中.内部函数维护对外部函数Environment的引用,在这种情况下包含counter变量.因此,即使在控件移出函数add之后,内部函数仍保持对counter变量的引用.

var add = (function(){
  var counter = 0;
  return function(){
    return ++counter;
  }
})();

document
  .querySelector('#btn')
  .addEventListener('click', function(){
    document.querySelector('#output').textContent = add();
  });

<div id="output">0</div>
<button id="btn">Increment</button>