在这个特定的 javascript 代码中返回一个函数有什么意义？答案

【问题标题】：What is the point of returning a function in this specific javascript code?在这个特定的 javascript 代码中返回一个函数有什么意义？
【发布时间】：2016-02-05 20:00:02
【问题描述】：

我遵循了一个关于如何使用 javascript 构建计算器的在线教程。该代码使用 for 循环遍历计算器的所有按钮和 2 个函数来添加数字并进行计算。代码如下：

for (var i = 0; i < buttons.length; i += 1) {

if (buttons[i].innerHTML === "=") {
    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].innerHTML === "x") {
            result.innerHTML += "*";
        }
        else {
            result.innerHTML += buttons[i].innerHTML;
        }
    };
}

function calculate(i) {
    return function() {
        result.innerHTML = eval(result.innerHTML);
    };
}

我想问为什么有两个函数 addValue 和 calculate 返回函数？如果我删除退货，代码将不起作用。为什么？

【问题讨论】：

防止此类问题：JavaScript closure inside loops – simple practical example
简单来说，addEventListener函数需要一个监听器。文档see here 将侦听器定义为“当指定类型的事件发生时接收通知的对象。这必须是实现 EventListener 接口的对象，或者只是一个 JavaScript 函数。”。

标签： javascript function for-loop

【解决方案1】：

如果删除 return 语句，则 addValue 返回 undefined。

addEventListener 需要两个参数，运行函数的事件名称和运行函数。

如果addValue 返回undefined，那么您将undefined 传递给addEventListener 而不是函数。

【讨论】：

【解决方案2】：

行：

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

在它被调用的那一刻，它调用了calculate(i)。然后返回将由事件处理程序调用的函数。事件处理程序不是调用calculate(i)，而是调用它返回的函数。

【讨论】：

【解决方案3】：

返回函数 throw 一个函数是 JavaScript 命名闭包的属性，一般函数我们通过 return 语句得到一个已解决的值，但是当我们的变量没有被解决时，我们可以将一个函数作为返回值传递给进一步的计算

【讨论】：

【解决方案4】：

当一个函数返回另一个函数或接收函数作为参数时被调用 High Order Function Wikipedia

这只是一些语言为我们提供的功能。

例如：

function addTextTag(idTag) {
  return function(text) {
      document.querySelector('#'+idTag).innerHTML = text;
  }
}

var containerChange = addTextTag('container'); 
 //calling addTextTag with first parameter return a function
 // that would receive another parameter
containerChange('tag says that');
containerChange('Now says this');
 //here we can call first function and pass directly parameter to the function returned
addTextTag('otherId')('Other Text');

【讨论】：