为什么这个 javascript 闭包不起作用？答案

【问题标题】：Why doesn't this javascript closure work?为什么这个 javascript 闭包不起作用？
【发布时间】：2016-12-22 05:56:23
【问题描述】：

所以我在这里有这段代码，我想用它来动态制作元素，但它不起作用：

make = {};
elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4'];
elements.forEach(function(element){
    make[element] = function() {
        document.createElement(element);
    }
})

但是，当我这样做时：

var h1 = make.h1();

我得到未定义...谁能解释为什么我传递给 createElement 函数的元素参数不起作用？我检查了这个以进行干燥和调试，我注意到 make 对象具有所有正确的属性和相应的函数，但是 createElement 函数似乎没有保留我要传递的元素的正确值。

免责声明：我知道我可以使用大量的库，但我这样做是为了学习和理解。感谢任何花时间向我解释这一点的人。 :]

【问题讨论】：

标签： javascript functional-programming closures

【解决方案1】：

你只是缺少一个return statement：

return document.createElement(element);

【讨论】：

哇，谢谢。我没有想到这一点的原因是因为我遵循的说明声明 createElement 函数创建并返回一个元素。我没有意识到我还必须返回那个元素。现在我觉得很傻，但非常感谢！
@dreamcod3r 不客气。它确实返回元素，但只返回到你调用它的函数，而不是最初调用它的函数。 JavaScript 中没有函数从它们被调用的地方返回（它们返回到它们被调用的地方，而不是从那里返回）。

【解决方案2】：

这是一种更实用的方法

let elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4']
let make = elements.reduce((acc, elem) =>
  Object.assign(acc, { [elem]: document.createElement(elem) }), {})

console.log(make)

输出

{
  "a": <a></a>,
  "div": <div></div>,
  "span": <span></span>,
  "form": <form></form>,
  "h1": <h1></h1>,
  "h2": <h2></h2>,
  "h3": <h3></h3>,
  "h4": <h4></h4>
}

【讨论】：

【解决方案3】：

因为它是一个传递数组并返回数组的函数，所以我认为 Array.map 是最合适的。看下面的代码：

elements = ['a', 'div', 'span', 'form', 'h1', 'h2', 'h3', 'h4'];
const make = elements.map(function(element){
    return document.createElement(element);
})

【讨论】：

它不应该返回一个数组
对不起，弄错了。在这种情况下，必须使用 reduce 来代替。