JavaScript控制台可以看到对象的内容，但是我无法访问它

Question

I'm trying to use the OpenLayers JavaScript library to load a number of KML files to a map. I can load all of the KML without a problem, but now in trying to retrieve data from the OpenLayers.Layer.Vector object being generated I'm running in to an issue.

If I output the generated object with console.log I can see the full object with all of it's properties fleshed out, but if I try to access most of the properties programatically I'm getting an undefined error. Here is my code:

    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var vectors = new Array();

    for(i = 1; i <= 14; i++ ) {

        var layer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kml/" + i + ".kml",
                format: new OpenLayers.Format.KML
            })
        });
        console.log(layer);
        console.log(layer.features[0].attributes.name);

        vectors.push(layer);
    }
    //etc...

So with just console.log(layer) I am able to see everything. With the following line, though, although the information clearly exists, I get the error. Also, when I try to access the same information directly through the console it works just fine.

Am I missing something obvious here?

EDIT:

Here is the root Object

Object:
EVENT_TYPES: Array[25]
alwaysInRange: true
div: HTMLDivElement
drawn: true
events: Object
features: Array[1]
id: "OpenLayers.Layer.Vector_39"
inRange: true
map: Object
maxExtent: Object
maxResolution: 1.40625
maxScale: 13517.573318481445
minExtent: null
minResolution: 0.00004291534423828125
minScale: 442943842.5
name: "KML"
numZoomLevels: 16
options: Object
projection: Object
protocol: Object
renderer: Object
resolutions: Array[16]
scales: Array[16]
selectedFeatures: Array[0]
strategies: Array[1]
styleMap: Object
tileSize: Object
units: "degrees"
unrenderedFeatures: Object
__proto__: Object

EDIT 2:

Won't be able to Stringify easily so here is some relevant information:

inside "features":

0: Object
length: 1
__proto__: Array[0]
id: "OpenLayers.Layer.Vector_39"

inside "0":

attributes: Object
data: Object
geometry: Object
id: "OpenLayers.Feature.Vector_3508"
layer: Object
lonlat: null
renderIntent: "default"
state: null
style: null
inRange: true

inside "attributes":

name: <string, which I can assure you exists>

For clarification the "layer.features[0].attributes.name" that I am attempting to use in my code works perfectly fine when I type it in to the console.

EDIT 3!

Tiers of output from direct access through console :

1) layer -> Object
2) layer.features -> Object
3) layer.features[0] -> Object
4) layer.features[0].attributes -> Object
5) layer.features[0].attributes.name -> <the string I'm looking for>
OR
6) layer.features[0].attributes['name'] works the same as above

Output from hardcoded script :

1) layer -> Object
2) layer.features -> []
3) layer.features[0] -> undefined
etc... 

Answer 1

You should be able to see the properties provided you're following the path to them correctly. Your full expression is layer.features[0].attributes.name . What you've posted so far tells us that the layer.features and layer.features[0] parts are right, but we'd have to know what's in layer.features[0] to know whether it has an attributes property, etc.

One thing that jumps out is that attributes is plural and then you're accessing a property on it directly. The plural suggests it may be an array, and so perhaps you need to look at a subscript?

For this stuff, I find nothing beats a debugger. You can use one drill down into the layer object and find out exactly what's in there, and usually when you do that you even see the path to the point you've expanded to. There are debuggers for every major browser out there:

• Chrome and Safari have "Dev Tools" built in (on Chrome Ctrl+Shift+I will open the panel)
• Firefox has the excellent Firebug add-in
• IE has the free edition of Visual Studio.Net (and IE8 and above have some built-in tools as well)

Edit : This part of your updated question is interesting:

2) layer.features -> []
3) layer.features[0] -> undefined

That suggests that either A) features is an empty array, or B) features is a sparse array that doesn't have an index 0 . All JavaScript arrays are sparse (they're not really arrays at all), so you might try:

var name;
for (name in layer.features) {
    console.log(name + ": " + layer.features[name]);
}

Answer 2

You'll need to study the format of your object. This is the long way around, but try this:

console.log(layer.features);
console.log(layer.features[0]);
console.log(layer.features[0].attributes);
console.log(layer.features[0].attributes.name);

Somewhere down the line you'll get an error, and that will tell you where your problem is. I would guess, after seeing your current log, that either attributes or name does not exist (at least not in the format you think they do). (of course, it's better/easier to use the drill-down in firebug for this, but the snippet above will get you started.)