javascript - 返回函数的函数 (Javascript)

Question

我正在查看一些 JavaScript 代码来创建计算器应用程序。这很简单，但让我困惑的是当有函数返回一个函数时。

通过下面的代码，我知道计算器的每个按钮都需要一个事件监听器来利用“单击”，根据单击的按钮调用该函数。单击按钮时，addValue(i) 函数将按钮值添加到结果字段。下面的函数有一个返回函数的函数。如果没有函数调用，结果返回“789+456-123/0.=x”

能否解释一下为什么 addValue(i) 函数需要返回一个函数才能使该函数起作用。

for (var i=0; i<buttons.length; i++) { 
    if(buttons[i]  === "="){
        buttons[i].addEventListener("click", calculate(i));
    } else {
        buttons[i].addEventListener("click", addValue(i));
    }
}

function addValue(i) {
    return function() {
        if(buttons[i].innerHTML === "÷") {
            result.innerHTML += "/";
        } else if (buttons[i] === "x") {
            result.innerHTML += "*";
        } else {
            result.innerHTML += buttons[i].innerHTML;
        }
    }
};

Answer 1

在此示例中，我假设该网页是一个计算器，类似于:

|---------------|
|               |
|---------------|
| 1 | 2 | 3 | * |
|---|---|---|---|
| 4 | 5 | 6 | / |
|---|---|---|---|
| 7 | 8 | 9 | = |
|---------------|

在本例中，按钮 buttons[i] 是计算器按钮之一； | 1 |，| 5 | 等。按钮的实际编号是其索引，因此 buttons[2] 将是 | 2 |, buttons[7] 将是 | 7 | 等。我猜测其他值，如 buttons[0] 和 buttons[10]，是操作按钮 ( | = |、| * |、|/|)。

现在，当用户单击这些按钮之一时，按钮上的字符(即按钮的 innerHtml)将添加到计算器的 结果 中(通过添加它到结果的innerHTML)，这只是操作的显示。所以如果我点击 | 3 |，然后 | * |，然后 | 5 |，计算器看起来像

|---------------|
|           3*5 |
|---------------|
| 1 | 2 | 3 | * |
|---|---|---|---|
| 4 | 5 | 6 | / |
|---|---|---|---|
| 7 | 8 | 9 | = |
|---------------|

这就是 addEventListener 发挥作用的地方。当您调用 element.addEventListener("click", func) 时，每当单击 element 时，都会调用 func。因此，要在单击按钮时将按钮添加到结果中，您可以这样做:

buttons[i].addEventListener("click", addButtonValueToResult);

其中 addButtonValueToResult 是将按钮的值添加到结果中的函数。

问题是，不同的按钮有不同的值，所以像这样的一个功能并不适用于所有按钮。因此，addButtonValueToResult 不可能是一个简单的函数；每个按钮都需要有自己的功能。其中一种解决方案是放弃 for 循环，只执行以下操作:

buttons[1].addEventListener("click", add1ToResult);
buttons[2].addEventListener("click", add2ToResult);
buttons[1].addEventListener("click", add3ToResult);
...

然后具有如下功能:

function add1ToResult() {
    result.innerHTML += "1"
}

但这需要大量不必要的工作，因为您需要为每个数字按钮(| 1 | 到 | 9 |)添加功能以及运算符(operator)按钮(| = |、|/| 和 | * |)，只需添加其 innerHtml > 到结果。此外，按钮的索引已分配给变量 i，并且可以通过 buttons[i] 使用该索引引用整个按钮。难道你不能让程序自动为每个按钮创建一个函数，当给定按钮的索引i时，获取按钮(通过buttons[i])并将该按钮的值添加到结果中？

这正是该程序的作用:addValue(i) 不仅仅添加按钮的内部值本身；它还添加按钮的内部值。它返回另一个函数，该函数还带有一些特殊按钮的测试用例，添加按钮的内部值。看一下这段代码:

function addValue(i) {
    return function() {
        if(buttons[i].innerHTML === "÷") {
            result.innerHTML += "/";
        } else if (buttons[i] === "x") {
            result.innerHTML += "*";
        } else {
            result.innerHTML += buttons[i].innerHTML;
        }
    }
};

假设您调用addValue(3)；这将返回一个函数，该函数会将数字 3 添加到 result 中的结果中。如果你调用addValue(9);这将返回一个函数，该函数会将数字 9 添加到 result 中的结果中。您可以调用函数 addValue 返回，并通过 (addValue(digit)()) 在结果中实际添加一个数字。但 addEventListener 不接受评估结果；它需要一个函数，稍后单击按钮时将调用该函数。