全域性 DOM 變數

樓蘭小騎士發表於2018-05-11

全域性 DOM 變數

你可能已經知道,宣告一個全域性變數(使用 var 或者不使用)的結果並不僅僅是建立一個全域性變數,而且還會在 global 物件(在瀏覽器中為 window )中建立一個同名屬性。
還有一個不太為人所知的事實是:由於瀏覽器演進的歷史遺留問題,在建立帶有 id 屬性的 DOM 元素時也會建立同名的全域性變數。例如:

<div id="foo"></div>

以及:

if (typeof foo == "undefined") {
foo = 42; // 永遠也不會執行
}
console.log( foo ); // HTML元素

你可能認為只有 JavaScript程式碼才能建立全域性變數,並且習慣使用 typeof 或 .. in window來檢測全域性變數。但是如上例所示,HTML頁面中的內容也會產生全域性變數,並且稍不注意就很容易讓全域性變數檢查錯誤百出。
這也是儘量不要使用全域性變數的一個原因。如果確實要用,也要確保變數名的唯一性,從而避免與其他地方的變數產生衝突,包括 HTML 和其他第三方程式碼。

Firefox

初始化時,window並沒有屬性foo.但在第一次訪問這個屬性的時候(通過window.foo屬性直接訪問或者通過全域性變數foo來訪問都可以),它會被自動建立.

相關文章