一、盡量少用全局對象

全局變量的問題在于，你的JavaScript應(yīng)用程序和web頁面上的所有代碼都共享了這些全局變量，他們住在同一個全局命名空間，所以當(dāng)程序的兩個不同部分定義同名但不同作用的全局變量的時候，命名沖突在所難免。

web頁面包含不是該頁面開發(fā)者所寫的代碼也是比較常見的，例如：

• 第三方的JavaScript庫
• 廣告方的腳本代碼
• 第三方用戶跟蹤和分析腳本代碼
• 不同類型的小組件，標(biāo)志和按鈕

比方說，該第三方腳本定義了一個全局變量，叫做result；接著，在你的函數(shù)中也定義一個名為result的全局變量。其結(jié)果就是后面的變量覆蓋前面的，第三方腳本就一下子嗝屁啦！

因為，你不小心，在代碼的某一處修改了全局變量， 會導(dǎo)致依賴全局變量的其它模塊出錯。而且出錯原因難調(diào)試，難找到。

再者就是，網(wǎng)頁運行肯定用到window對象，瀏覽器引擎又要遍歷一次window的屬性，性能下降。

• 全局變量是維系不同模塊之間的紐帶，模塊之間只能通過全局變量來訪問對方提供的功能
• 能使用局部變量的時候，絕不要使用全局變量

var i,n,sum//globals
function averageScore(players){
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

保持這些變量為局部變量，僅將其作為需要使用它們的代碼的一部分。

function averageScore(players){
var i,n,sum;
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

在browser中，this關(guān)鍵字會指向全局的window對象
JavaScript 的全局命名空間也被暴露為在程序全局作用域中可以訪問的全局對象，該對象作為 this 關(guān)鍵字的初始值。在 Web 瀏覽器中，全局對象被綁定到全局的 window 變量。添加或修改全局變量會自動更新全局對象。

this.foo; //undefined
foo ="global foo"; //"global foo"
this.foo; //"global foo"

類似地，更新全局對象也會自動地更新全局命名空間：

var foo ="global foo";
this.foo; //"global foo"
this.foo ="changed";
foo; //"changed"

兩種用來改變?nèi)謱ο蟮姆绞剑ㄟ^var關(guān)鍵字聲明以及給全局對象設(shè)置屬性(通過this關(guān)鍵字)

通過全局對象進行針對當(dāng)前運行環(huán)境的特性檢測(Feature Detection)，比如在ES5中提供了一個JSON對象用來操作JSON數(shù)據(jù)，那么可以通過if(this.JSON)來判斷當(dāng)前運行環(huán)境是否支持JSON

if(!this.JSON){
 this.JSON ={
  parse:...,
  stringify:...
 }
}

二、如何避免全局變量

方法一：只創(chuàng)建一個全局變量。

MYAPP.stooge = {
 "first-name": "Joe",
 "last-name": "Howard"
};

MYAPP.flight = {
 airline: "Oceanic",
 number: 815,
 departure: {
  IATA: "SYD",
  time: "2004-09-22 14:55",
  city: "Sydney"
 },
 arrival: {
  IATA: "LAX",
  time: "2004-09-23 10:42",
  city: "Los Angeles"
 }
};

方法二：使用模塊模式

var serial_maker = function ( ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces unique
// strings.

 var prefix = '';
 var seq = 0;
 return {
  set_prefix: function (p) {
   prefix = String(p);
  },
  set_seq: function (s) {
   seq = s;
  },
  gensym: function ( ) {
   var result = prefix + seq;
   seq += 1;
   return result;
  }
 };
}( );

var seqer = serial_maker( );
seqer.set_prefix = 'Q';
seqer.set_seq = 1000;
var unique = seqer.gensym( ); // unique is "Q1000"

所謂模塊模式，就是創(chuàng)建一個函數(shù)，該函數(shù)包括，私有變量和一個特權(quán)對象，特權(quán)對象的內(nèi)容是，利用閉包能訪問到私有變量的函數(shù)，最后返回特權(quán)對象。

首先，方法二，不僅可以當(dāng)作全局變量用，也可以用在局部聲明全局變量。因為就算你在不知道某個地方修改了seqer，就會立即報錯，因為這是個對象，不是字符串。

方法三：零全局變量

零全局變量實際上是為了適應(yīng)一小段封閉代碼而采取的一種局部變量處理方式，只適合在一些特殊場景中使用。最常見的就是一些不會被其他腳本訪問到的完全獨立的腳本。
使用零全局變量的方式需要采用立即執(zhí)行函數(shù)，用法如下。

( function ( win ) {

 'use strict' ;
 var doc = win.document ;
 //在此定義其他的變量并書寫代碼
} )

三、意外的全局變量

由于JavaScript的兩個特征，不自覺地創(chuàng)建出全局變量是出乎意料的容易。首先，你可以甚至不需要聲明就可以使用變量；第二，JavaScript有隱含的全局概念，意味著你不聲明的任何變量都會成為一個全局對象屬性。參考下面的代碼：

function sum(x, y) {
 // 不推薦寫法: 隱式全局變量
 result = x + y;
 return result;
}

此段代碼中的result沒有聲明。代碼照樣運作正常，但在調(diào)用函數(shù)后你最后的結(jié)果就多一個全局命名空間，這可以是一個問題的根源。

經(jīng)驗法則是始終使用var聲明變量，正如改進版的sum()函數(shù)所演示的：

function sum(x, y) {
 var result = x + y;
 return result;
}

另一個創(chuàng)建隱式全局變量的反例就是使用任務(wù)鏈進行部分var聲明。下面的片段中，a是本地變量但是b確實全局變量，這可能不是你希望發(fā)生的：

// 反例，勿使用
function foo() {
 var a = b = 0;
 // ...
}

此現(xiàn)象發(fā)生的原因在于這個從右到左的賦值，首先，是賦值表達式b = 0，此情況下b是未聲明的。這個表達式的返回值是0，然后這個0就分配給了通過var定義的這個局部變量a。換句話說，就好比你輸入了：

var a = (b = 0);
如果你已經(jīng)準(zhǔn)備好聲明變量，使用鏈分配是比較好的做法，不會產(chǎn)生任何意料之外的全局變量，如：

function foo() {
 var a, b;
 // ... a = b = 0; // 兩個均局部變量
}

然而，另外一個避免全局變量的原因是可移植性。如果你想你的代碼在不同的環(huán)境下（主機下）運行，使用全局變量如履薄冰，因為你會無意中覆蓋你最初環(huán)境下不存在的主機對象

  總是記得通過var關(guān)鍵字來聲明局部變量

 使用lint工具來確保沒有隱式聲明的全局變量

以上就是對javascript的全局變量介紹，希望對大家的學(xué)習(xí)有所幫助。

最新評論