尽管在console.log中显示了它的存在性，但仍然无法访问对象数据成员。 尝试的访问返回未定义

Question

I have a array of anonymous functions that are constructors, they take a parameter, then use it to build a var to this.

var template = [
     function (model){ this.html = "blah" + model.something},
     function (model){ this.html = "blah" + model.something},
]

I loop through the array and construct each function into an object using the new keyword.

template.foreach( template => template = new template(model))

This seems to work because when I console.log it shows template as a list of objects with data member this.html, and its populated correctly.

However, when I try to access template[0].html it returns undefined.

When I do typeof on an element of the list it says function, yet the browser shows it as an object, and most importantly when I do template[0].html it returns as undefined despite showing it when I console log the list.

Answer 1

1. it should be forEach() instead of foreach()

2. You should always return something in your function.

This is very strange way to use this it is because when you store function in array, the this is referencing the object where you call this function.

Answer 2

The point is that forEach is not changing the array that is being iterated, it is just iterating it. If you want to return an array of already created objects you can use other function like map:

const myObjectArray = template.map(t => new t(model));

Now you can access myObjectArray[0].html

Take care that myObjectArray is a new array and template is not changed.

By the way, having a variable called template that holds an array is not a good practice, better call it templateArray or templates (make it clear that it is an array)