在JavaScript中找到全局变量的最佳方法

Question

我继承了一个项目，其中看起来有很多变量污染了全局范围，我希望找到所有这些变量。 查找用户引入的全局变量的最佳方法是什么？ 我想排除默认情况下位于其中的window对象的属性，而仅过滤掉由我们的代码引入的属性。 是否有工具或IDE插件可让我轻松识别这些信息？ 谢谢

Answer 1

将窗口对象中的键与“空”窗口对象的键进行比较：

(function(){
    var iframe = document.createElement('iframe');
    iframe.src = "about:blank";
    document.body.appendChild(iframe);

    var windowVars = Object.keys(iframe.contentWindow);
    var globalVars = Object.keys(window).filter(key => !windowVars.includes(key));

    console.log("global Vars:", globalVars);
    document.body.removeChild(iframe);
})();

现在，您必须搜索代码以查找声明它们的行。

Answer 2

获取窗口对象示例： https : //jsfiddle.net/noevgh4u/

对象比较示例： https : //jsfiddle.net/noevgh4u/1/

我能想到的最实用的方法是在您选择的浏览器中打开空白页，然后基于该Windows属性写出一个对象。

document.body.append("var obj = {");
for(prop of Object.keys(window)) {
document.body.append(prop +": null");
};
document.body.append("}");

在示例中，从页面上的文本复制该对象。

将其粘贴到要检查全局变量的应用程序中。

使用创建一个新对象

var newObj;
for(prop of Object.keys(window)) {
newObj[prop] = null;
};

因此，在应用程序中，您现在拥有包含空白Windows项的Obj和包含应用程序项的newObj 。

然后使用诸如对象/数组的深度比较之类的方法比较两者

或类似的东西：

function filterKeys(a, b) {
var firstKeys = Object.keys(a);
var secondKeys = Object.keys(b);
var missingKeys = firstKeys.filter(val => !secondKeys.includes(val));
return missingKeys;
}
var createdVarsAndFuncs = filterKeys(obj, newobj);

我在jsFiddle https://jsfiddle.net/noevgh4u/1/中创建了一个示例

Answer 3

尝试这个...

for(var stuff in window) { 
  if(window.hasOwnProperty(stuff)) console.log(stuff); 
}

这将列出页面上的所有函数和变量，可能不是超级有用，但可能会为您提供更多信息。

如果您打开Chrome开发者工具，可以尝试一下。 创建一个变量var life = 42 ，执行上面的for循环后您会看到它列出。