如何计算全局范围内的全局变量数量？

Question

我正在开发一个由其他人开发的项目。我加载了 Chrome 开发者工具来检查全局变量的状态。当我在 Scope 下勾选打开 Global 时，我看到了大量的全局变量。滚动浏览它们需要 8 秒多的时间。在这个项目上工作了一段时间后，我知道全局变量是一个我们必须解决的问题；但是，*这与我的问题无关。

为了传达我们被淹没的全局范围的规模，我想计算当前在全局范围内实例化的变量的数量

我该怎么做？

我正在寻找可以在控制台中立即执行的 JavaScript 答案。基本上可以迭代全局范围和count++ 的东西。

Answer 1

我不确定全局变量的数量本身是否是一个有用的指标。您应该做一些分析来确定哪些是由代码创建的，哪些是特定于主机的，哪些与环境相关（例如 DOM）。

在浏览器中，window 对象是 global object 的同义词，主机可以向其添加属性（例如 window.name）以及在其原型上定义属性（如果有的话）。

此外，所有元素 ID 都是作为 window 的属性创建的（你可以责怪 Microsoft 和 IE），因此如果元素 ID 很多，那么就会有很多全局属性。

不管怎样，下面是两种计算全局（窗口）对象自身可枚举属性的方法。它使用 IIFE，因此它本身不会创建任何属性。

// Create 3 global properties
var x, y, z;

(function(global) {

  // for..in with hasOwnProperty check
  var count = 0;
  for (var prop in global) {
    if (global.hasOwnProperty(prop)) {
      count++;
    }
  }
  console.log('for..in count: ' + count +
  
            // Direct count using Object.keys
            '\nObject.keys  : ' + Object.keys(global).length);
            
// Pass global (window in a browser) object to function
}(this));

因此，在浏览器中测试代码创建的变量的一种方法可能是：

1. 计算“空”文档中全局属性的数量，这应该是默认的主机定义集
2. 统计可疑文档中全局属性的总数
3. 统计文档中带有 ID 的元素个数

所以代码创建的全局变量的数量应该是 item 2 - (item 1 + item 3) 的结果。

您可以计算具有类似 ID 的元素：

var allEls = document.getElementsByTagName('*');
var idCount = 0;

for (var i=0, iLen=allEls.length; i<iLen; i++) {  
  if (allEls[i].id != '') {
    ++idCount;
  }
}

或：

[].filter.call(document.getElementsByTagName('*'), function(el) {
  return el.id != '';
}).length;

Answer 2

var count = 0;
for( var x in window ){
    if( window.hasOwnProperty(x) ) count++;
}
console.log(count);