安全使用 JavaScript Global Variables

剛開始學習 JavaScript 時候,一定會大量使用 Global Variables。但是使用 Global Variables 的同時,請務必使用 var 宣告,而不是直接使用阿,否則會常常遇到 ReferenceError 的錯誤。

function addToBlockList (item) {
  block_List.push(item);
}

addToBlockList ("add 127.0.0.1");

執行後你可以發現 console 噴出 Uncaught ReferenceError: block_List is not defined,加上一個判斷試試看。程式碼改成底下

function addToBlockList (item) {
  if (block_list) {
    block_List.push(item);
  }
}

addToBlockList ("add 127.0.0.1");

會噴出一樣的錯誤訊息,原因也是 block_List is not defined,最後將程式碼換成底下

function addToBlockList (item) {
  if (window.block_list) {
    window.block_List.push(item);
  }
}

addToBlockList ("add 127.0.0.1");

就可以正常跑了,也不會出現任何錯誤訊息,建議大家不要寫這樣的程式碼,能夠少用 window.xxxx 這種全域變數就盡量少用,不要任意宣告或修改 window 全域變數,上面程式碼可以換成底下會更好

(function() {
  var block_list = [];
  var addToBlockList = function (item) {
    if (block_list) {
      block_list.push(item);
    }
  };
    
  addToBlockList("127.0.0.1");
  console.log(block_list);
  
})();

這樣可以避免渲染 window Global Variable。如果你是用 CoffeeScript 來寫,可以寫成底下

(->
  block_list = []
  addToBlockList = (item) ->
    block_list.push item  if block_list
    return

  return
)()

但是我建議可以使用 block_list? 寫法

(->
  block_list = []
  addToBlockList = (item) ->
    block_List?.push item
    return

  return
)()

轉成的 JavaScript 會是

(function() {
  var addToBlockList, block_list;
  block_list = [];
  addToBlockList = function(item) {
    if (typeof block_List !== "undefined" && block_List !== null) {
      block_List.push(item);
    }
  };
})();