javascript - javascript 中不同大小写的闭包

Question

下面我有两种不同的情况。这两种情况都应用了相同的 JavaScript 闭包函数方法。情况 2 按预期输出结果，但情况 1 没有，因为每次单击按钮时增量都会停止在 1 处。我知道其他一些关闭方法可以使其按我的预期工作或每次单击按钮时增加计数。但我只是好奇为什么下面的情况 1 不起作用，而与情况 2 具有相同的方法和方式，但它仍然有效。我希望这是有道理的。

案例:1

function incrementClickCount() {
  var clickCount = 0;

  function a() {
    return ++clickCount;
  }
  return a();
}

<input type="button" value="click me" onclick="alert(incrementClickCount());">

案例:2

function addNumber(firstNumber, secondNumber) {
  var returnValue = 'Result is : ';

  function add() {
    return returnValue + (firstNumber + secondNumber);
  }
  return add();
}

console.log(addNumber(10, 20));

Answer 1

您需要从incrementClickCount函数返回函数a，此时您正在返回a()，即调用a的结果。

    function incrementClickCount(){
        var clickCount = 0;
        function a(){
            return ++clickCount;
        }
        return a;
    }

    var incrementer = incrementClickCount();

<input type="button" value="click me" onclick="alert(incrementer())">

一种更紧凑的方法是使用 ES6 lambda 表示法一次声明并返回函数:

function incrementClickCount() {
    var clickCount = 0;
    return () => ++clickCount;
}

另一个建议是向按钮添加监听器，而不是使用 onclick 属性。好处包括将所有行为封装在 Javascript 中，并且能够在需要时删除监听器。

function makeIncrementer() {
  var clicks = 0;
  return () => ++clicks;
}

const incrementer = makeIncrementer();

function clickHandler() {
  alert(incrementer());
}

document.getElementById('incrementButton').addEventListener('click', clickHandler);

<button id='incrementButton'>Increment</button>