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

Question

我繼承了一個項目，看起來有很多變量會污染全局範圍，我想要找到所有這些變量。找到用戶引入的全局變量的最佳方法是什麼？我想排除默認情況下窗口對象上的屬性，只需篩選出已由我們的代碼引入的屬性。是否有工具或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

嘗試......

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

這將列出在頁面上所有的函數和變量，可能不是超級有用的，但可能會給你一些更多的信息。

如果你打開Chrome開發工具，你可以嘗試一下。創建一個變量var life = 42，執行上面的for循環後，你會看到它被列出。

Answer 3

獲取一個窗口對象實例：https://jsfiddle.net/noevgh4u/

對象實例的比較：https://jsfiddle.net/noevgh4u/1/

我能想到的辦法是，開放在你所選擇的瀏覽器中的空白頁，最實用的方法，寫出來的基於該窗口屬性的對象。

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

，使應用程序中的新的對象，你現在有的OBJ包含一個空白Windows鍵和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/