函数式编程——为什么这个javascript闭包不能工作?

functional programming - Why doesn't this javascript closure work?

本文关键字：不能 闭包 工作 javascript 编程 为什么 函数      更新时间：2023-09-26

我有这段代码，我想用它来动态创建元素，但它不起作用:

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

但是，当我这样做时:

var h1 = make.h1();

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

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

您只是缺少一个返回语句:

return document.createElement(element);

这是一个更实用的方法

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>
}

因为它是一个传递数组并返回数组的函数，我认为数组。地图是最合适的。请看下面的代码:

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