为什么此javascript闭包无效？

Question

So I have this code here that I want to use to dynamically make elements, but it does not work:

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

However, when I do:

var h1 = make.h1();

I get undefined... Can anyone explain why the element param I am passing to the createElement function doesn't work? I inspected this to dry and debug and I noticed that the make object has all the correct properties and corresponding functions, however the createElement function doesn't seem to retain the correct value of the element I am tying to pass.

DISCLAIMER: I know there are tons of libraries that I can use but I am doing this for learning and understanding purposes. Thank you to anyone who takes some time to explain this to me. :]

Answer 1

您只是缺少一个return语句 ：

return document.createElement(element);

Answer 2

This is a more functional approach

 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) 

Output

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

Answer 3

since it is a function passing a array and return a array, I think Array.map is the best fit. see the code below:

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