在 Javascript 中查找全局变量的最佳方法

Question

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

Answer 1

试试这个...

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

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

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

Answer 2

获取 Window 对象示例：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。

然后用Deep comparison of objects/arrays

等方法比较两者

或类似的东西：

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

将您的 window 对象中的键与 "empty" window 对象中的键进行比较：

(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);
})();

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

在 Javascript 中查找全局变量的最佳方法

Best way to find global variables in Javascript

javascript

scope

global

global-variables