有人可以解释这个 Javascript 闭包示例吗

Question

function makeAdder(x) {
    return function(y) {
        console.log("X:" + x + " Y:" + y);
        return x + y;
  };

}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));
console.log(add10(2));

好吧，我对 developer.mozilla 上闭包下的这个例子有点困惑。

如果有人可以尽可能详细地解释，以便我了解闭包。

忽略console.log，我只是添加了它以查看显示的值，例如，当您执行add5时，我可以看到x是5，y是2。

我安慰 add5() 看看我得到了什么，我得到了 NaN - 我猜这是因为我没有指定一个参数，因为它想要一个并且不能将一个数字添加到 undefined。

所以混淆是madeAdder的内部函数中的参数y。

希望有人能提供比 mozilla 更好的解释...我认为线索是环境，但我是新手，因此需要专家的帮助。

谢谢

Answer 1

function makeAdder(x) {
    return function(y) {
        console.log("X:" + x + " Y:" + y);
        return x + y;
    };
}

makeAdder 需要一个名为x 的参数，并返回一个需要参数y 的新函数。在执行这个内部函数时，外部作用域的x会被添加到参数y中，并返回sum。

var add5 = makeAdder(5); 将创建内部函数的新实例并将其存储到add5。此内部函数的x 设置为5。当使用add5(2) 执行add5 时，这将返回7，因为x 值（外部范围5）将被添加到参数2。

add10 的过程是相同的。

编辑当不传递参数（内部或外部函数或两者）时，参数（y 或x 或两者）将为undefined。 undefined+number 或 undefined+undefined 返回 NaN，因为一个或多个和数不是数字。

编辑 2：过程演练：

var add5 = makeAdder(5); 会将add5 设置为：

function(y) {
   console.log("X:" + 5 + " Y:" + y);
   return 5 + y;
}

因为makeAdder(5) 返回其内部函数并将x 设置为5。所以现在使用var sum = add5(2); 执行时，此生成的函数将计算并返回5 + y (5 + 2)。

注意：它并没有真正将 x 设置为 5（它仍然是对外部 x 的引用），但我认为这更容易理解并且在这个特定示例中不会改变任何内容