DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 跟我學習javascript的全局變量
跟我學習javascript的全局變量
編輯:關於JavaScript     

一、盡量少用全局對象

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

web頁面包含不是該頁面開發者所寫的代碼也是比較常見的,例如:

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

比方說,該第三方腳本定義了一個全局變量,叫做result;接著,在你的函數中也定義一個名為result的全局變量。其結果就是後面的變量覆蓋前面的,第三方腳本就一下子嗝屁啦!

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

再者就是,網頁運行肯定用到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關鍵字會指向全局的window對象
JavaScript 的全局命名空間也被暴露為在程序全局作用域中可以訪問的全局對象,該對象作為 this 關鍵字的初始值。在 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"

兩種用來改變全局對象的方式,通過var關鍵字聲明以及給全局對象設置屬性(通過this關鍵字)

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

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

二、如何避免全局變量

方法一:只創建一個全局變量。

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"

所謂模塊模式,就是創建一個函數,該函數包括,私有變量和一個特權對象,特權對象的內容是,利用閉包能訪問到私有變量的函數,最後返回特權對象。

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

方法三:零全局變量

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

( function ( win ) {

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

三、意外的全局變量

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

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

此段代碼中的result沒有聲明。代碼照樣運作正常,但在調用函數後你最後的結果就多一個全局命名空間,這可以是一個問題的根源。

經驗法則是始終使用var聲明變量,正如改進版的sum()函數所演示的:

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

另一個創建隱式全局變量的反例就是使用任務鏈進行部分var聲明。下面的片段中,a是本地變量但是b確實全局變量,這可能不是你希望發生的:

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

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

var a = (b = 0);
如果你已經准備好聲明變量,使用鏈分配是比較好的做法,不會產生任何意料之外的全局變量,如:

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

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

  總是記得通過var關鍵字來聲明局部變量

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

以上就是對javascript的全局變量介紹,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved