javascript - chrome浏览器遍历window属性不完全

Question

我想遍历window对象的全部属性，代码如下：

var count = 0;
for (var it in window) {
    count++;
    console.log(count + ":" + it)
}
console.log("一共:"+count)

控制台显示 为177个。
但是用console查看的话远远不止 177 个？
有大神可以帮忙觉解下吗？

Answer 1

这里要分好4种情况：
1.遍历可枚举的自身属性
可枚举的意思就是该属性的[[Enumerable]]特性为true,自身属性的意思就是该属性不是从原型链上继承下来的.

(function () {
    var propertys = Object.keys(window);
    alert(propertys.length);         //3
    alert(propertys.join("\n"));     //window,document,InstallTrigger,除了最后一个是火狐私有的属性,原来window对象只有两个可枚举的自身属性.window属性指向window对象自身,一般没什么用.
})()

2.遍历所有的自身属性

特性为不可枚举的属性也并不是遍历不到,ES5给我们提供了getOwnPropertyNames方法,可以获取到一个对象的所有自身属性.

(function () {
    var propertys = Object.getOwnPropertyNames(window);
    alert(propertys.length);       //72
    alert(propertys.join("\n"));   //Object,Function,eval等等
})()

3.遍历可枚举的自身属性和继承属性

继承属性怎么遍历,你应该知道,就是最常用的for in遍历

(function () {
    var getEnumPropertyNames = function (obj) {
        var props = [];
        for (prop in obj) {
            props.push(prop);
        }
        return props;
    }
    var propertys = getEnumPropertyNames(window);
    alert(propertys.length);       //185
    alert(propertys.join("\n"));   //addEventListener,onload等等
})()

4.遍历所有的自身属性和继承属性

这种遍历主要用在各种js调试工具的代码补全功能上.比如Firebug的.

(function () {
    var getAllPropertyNames = function (obj) {
        var props = [];
        do {
            props = props.concat(Object.getOwnPropertyNames(obj));
        } while (obj = Object.getPrototypeOf(obj));
        return props;
    }
    var propertys = getAllPropertyNames(window);
    alert(propertys.length);          //276
    alert(propertys.join("\n"));      //toString等
})()

Answer 2

你要了解属性的可枚举性（enumerable）。console列出的是所有的属性，而for in只能列出可枚举的属性。

Answer 3

Object.getOwnPropertyNames(window)

Window对象说明：https://developer.mozilla.org/zh-CN/docs/Web/API/Window