Does Object.keys() work in Internet Explorer 9 for built-in objects?
The Object.keys() method works fine for me with code like this:
var foo = {foo: 1, bar: 2};
console.log(Object.keys(foo).length);
However, Object.keys() returns a zero-length array for built-in objects with code like this:
<!doctype html>
<html>
<head>
<title>Object.keys()</title>
</head>
<body>
<script type="text/javascript">
console.log(Object.keys(window.document).length);
</script>
</body>
</html>
Am I missing something? I'm using Internet Explorer 9.0.8112.16421.
Postscript: I'm still not clear why this (for example):
for (prop in performance.timing) {
if (performance.timing.hasOwnProperty(prop)) {
console.log(prop);
}
}
...produces nothing in IE9, whereas this works开发者_运维技巧 fine:
for (prop in performance.timing) {
console.log(prop);
}
In JavaScript, there are native objects and host objects. In general, you can rely on things like Object.keys
working with native objects, but not with host objects. window
, document
, and others are host objects. IE in particular is well-known for its host objects not being native-like (host functions don't have the call
or apply
feature, etc.).
Alternately, of course, it could be that document
has no enumerable properties. Most of the default properties of objects are non-enumerable and so don't show up in Object.keys
. For instance, Object.keys([]).length
and Object.keys(new RegExp(".*")).length
are both 0
because neither has any enumerable properties even though they both have lots of properties (they have properties for all of their "methods", and of course the blank array has a length
property and the RegExp
has a lastIndex
property).
Update: And in fact, it was the enumerable thing. Try this test:
alert(Object.keys(window.document).length);
window.document.AAA__expando__property = "foo";
alert(Object.keys(window.document).length);
For me, on IE9, those alerts are "0" and "1", respectively. So window.document
supports Object.keys
, it's just that window.document
doesn't, by default, have any enumerable properties. (In contrast, on Chrome I get 65 enumerable properties to start with, and of course 66 once I've added my expando.)
Here's a rather more full test page (live copy) (hacked-together quickly, not a thing of beauty):
window.onload = function() {
document.getElementById('theButton').onclick = function() {
if (typeof Object.keys !== 'function') {
display("<code>Object.keys</code> is not a function");
return;
}
showKeys("Before adding", Object.keys(window.document));
window.document.AAAA__expando__foo = "bar";
showKeys("After adding", Object.keys(window.document));
};
function showKeys(prefix, keys) {
var p, ul;
keys.sort();
prefix =
"[" + prefix +
"] Keys on <code>window.document</code> (" +
keys.length +
")";
if (keys.length !== 0) {
prefix += " (click to toggle list)";
}
p = display(prefix);
if (keys.length !== 0) {
ul = document.createElement("ul");
ul.innerHTML = "<li>" + keys.join("</li><li>") + "</li>";
ul.style.display = "none";
document.body.appendChild(ul);
p.onclick = function() {
ul.style.display =
(ul.style.display === "none") ? "" : "none";
};
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
return p;
}
};
精彩评论