javascript變數汙染簡單介紹

在強型別語言中，可以有效的防止變數汙染，因為在同一作用域內，不允許重複宣告同名變數。

但是在javascript中並沒有這個強制要求。

當然在ES6中也不允許使用let和const在同一作用域內宣告重複變數和常量。

暫時先不考慮ES6的let和const;在javascript中，如果宣告一個變數以後，又在同一作用於宣告重複的變數，那麼就會忽略後面的宣告，如果後面宣告的變數賦值，那麼這個值會被賦值給第一個宣告的變數。所以如果在同一個作用域內已經宣告瞭一個變數，那麼後面再投放同一個名稱的變數的話，就會產生一些列的問題。程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
var webName = "螞蟻部落";
function done() {
  console.log(webName);
}
var webName = "antzone";
done();

上面程式碼中，輸出結果是"antzone"，說明產生了汙染。

這種現象尤其是在團隊開發，且命名比較複雜的時候容易產生。

下面簡單介紹一下如何避免此種問題:

使用匿名函式模擬塊級作用域:

[JavaScript] 純文字檢視 複製程式碼
(function(){
  var dom=document.getElementById("test");
  dom.addEventListener("click",function(){
    console.log("www.softwhy.com");
  },false)
})()

如果僅僅是為了完成某個單純的操作，使用匿名自執行函式是個良好的選擇。[

函式執行完畢之後，記憶體釋放，變數不會對外界產生汙染。

使用名稱空間的方式:

[JavaScript] 純文字檢視 複製程式碼
var antzoneObj={};
  (function (ant) {
  var dom=document.getElementById("antzone");
  dom.addEventListener("click",function(){
    console.log("www.softwhy.com");
  },false);
  ant.age=4;
  ant.show = function () {
    console.log("螞蟻部落");
  }
})(antzoneObj)
  antzoneObj.show();