DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript 聲明全局變量與局部變量
JavaScript 聲明全局變量與局部變量
編輯:JavaScript基礎知識     

一、JavaScript 聲明全局變量的三種方式:

聲明方式一: 使用var(關鍵字)+變量名(標識符)的方式在function外部聲明,即為全局變量,否則在function聲明的是局部變量。該方式即為顯式聲明詳細如下:

代碼如下: var test = 5;  //全局變量 function a() {   var cc=3; //局部變量   alert(test); } function b(){ alert(test); }

聲明方式二: 沒有使用var,直接給標識符test賦值,這樣會隱式的聲明了全局變量test。即使該語句是在一個function內,當該function被執行後test變成了全局變量。

test = 5;//全局變量

function a() {  

aa=3; //全局變量  

alert(test);

}

聲明方式三: 使用window全局對象來聲明,全局對象的屬性對應也是全局變量,詳細如下:

window.test;

window.test = 5;

 

全局變量的優點:

可以減少變量的個數,減少由於實際參數和形式參數的數據傳遞帶來的時間消耗。

全局變量的缺點:

(1)全局變量保存在靜態存貯區,程序開始運行時為其分配內存,程序結束釋放該內存。與局部變量的動態分配、動態釋放相比,生存期比較長,因此過多的全局變量會占用較多的內存單元。

(2)全局變量破壞了函數的封裝性能。函數象一個黑匣子,一般是通過函數參數和返回值進行輸入輸出,函數內部實現相對獨立。但函數中如果使用了全局變量,那麼函數體內的語句就可以繞過函數參數和返回值進行存取,這種情況破壞了函數的獨立性,使函數對全局變量產生依賴。同時,也降低了該函數的可移植性。

(3)全局變量使函數的代碼可讀性降低。由於多個函數都可能使用全局變量,函數執行時全局變量的值可能隨時發生變化,對於程序的查錯和調試都非常不利。 因此,如果不是萬不得已,最好不要使用全局變量。

 

二、JS的全局變量與局部變量作用域

(1)Javascript的變量的scope是根據方法塊來劃分的(也就是說以function的一對大括號{ }來劃分)。切記,是function塊,而for、while、if塊並不是作用域的劃分標准,可以看看以下幾個例子:

 <script>  

function test2(){  

    alert ("before for scope:"+i);    // i未賦值(並不是未聲明!使用未聲明的變量或函數全拋出致命錯誤而中斷腳本執行)  

  // 此時i的值是underfined  

  for(var i=0;i<3;i++){  

        alert("in for scope:"+i);  // i的值是 0、1、2, 當i為3時跳出循環  

    } 

    alert("after for scope:"+i);  // i的值是3,注意,此時已經在for scope以外,但i的值仍然保留為3  

  while(true){  

  var j = 1;  

  break;  

    }  

    alert(j);    // j的值是1,注意,此時已經在while scope以外,但j的值仍然保留為1  

  if(true){  

  var k = 1;  

    }  

    alert(k);  //k的值是1,注意,此時已經在if scope以外,但k的值仍然保留為1  

test2();  

//若在此時(function scope之外)再輸出只存在於test2 這個function scope裡的 i、j、k變量會發生神馬效果呢?  

alert(i); //error! 沒錯,是error,原因是變量i未聲明(並不是未賦值,區分test2函數的第一行輸出),導致腳本錯誤,程序到此結束!  

alert("這行打印還會輸出嗎?"); //未執行  

alert(j); //未執行  

alert(k); //未執行  

</script> 

(2)Javascript在執行前會對整個腳本文件的聲明部分做完整分析(包括局部變量),從而確定實變量的作用域。怎麼理解呢?看下面一個例子:

<script>  

    var a =1;  

  function test(){  

        alert(a); //a為undefined! 這個a並不是全局變量,這是因為在function scope裡已經聲明了(函數體倒數第4行)一個重名的局部變量,  

    //所以全局變量a被覆蓋了,這說明了Javascript在執行前會對整個腳本文件的定義部分做完整分析,所以在函數test()執行前,  

    //函數體中的變量a就被指向內部的局部變量.而不是指向外部的全局變量. 但這時a只有聲明,還沒賦值,所以輸出undefined。  

        a=4         

        alert(a);  //a為4,沒懸念了吧? 這裡的a還是局部變量哦!  

  var a;     //局部變量a在這行聲明  

        alert(a);  //a還是為4,這是因為之前已把4賦給a了  

    }  

    test();  

    alert(a); //a為1,這裡並不在function scope內,a的值為全局變量的值  

</script> 

(3)當全局變量跟局部變量重名時,局部變量的scope會覆蓋掉全局變量的scope,當離開局部變量的scope後,又重回到全局變量的scope,而當全局變量遇上局部變量時,怎樣使用全局變量呢?用window.globalVariableName。

script>  

    var a =1;  

  function test(){     

        alert(window.a);  //a為1,這裡的a是全局變量哦!  

    var a=2;     //局部變量a在這行定義  

        alert(a);  //a為2,這裡的a是局部變量哦!  

    }  

    test();  

    alert(a); //a為1,這裡並不在function scope內,a的值為全局變量的值  

</script> 

三、避免全局變量沖突的小技巧

在寫js代碼的時候,經常會因為這樣或者那樣的原因用到全局變量,如果全局變量只在一個js裡使用,那就沒問題,但如果變量在不同的js文件裡出現,這時隱藏的問題就會開始暴露,也許你能很快修復出現的BUG,又或許全無頭緒。

先看下邊的js文件test1.js

var a = 1,     b = 2,     c = a + b;//此時c的值為3

html代碼如下:

<html>

<head>

</head>

<body>

<script src="test1.js"></script>

<script> alert(c);//對話框顯示3 </script>

</body>

</html>

上邊的test1.js文件在單獨使用的時候,毫無疑問,是正確的,c的值就是我們期望的3。但是經常會遇到一個項目由多個人來合作開發,然後另一個同事給網頁加載另一個test2.js,代碼如下:

var a = 3,     b = 4,     c = a + b;

修改後的html代碼如下:

<html>

<head>

</head>

<body>

<script src="test1.js"></script>

<script src="test2.js"></script>

<script> alert(c);//對話框顯示7 </script>

</body>

</html> 也就是說,test1.js中的變量被test2.js中同名變量給覆蓋了!如果聲明的變量越多,那麼變量沖突就越頻繁,這會讓我們在新增變量的時候都提心吊膽。

那麼,有什麼解決方案嗎?答案是肯定的,下邊磨途歌將給大家介紹“變量命名空間”簡單的使用方法。

更改後的test1.js代碼:

var _test1 = {     a : 1,     b : 2,     c : 0 }; _test1.c = _test1.a + _test1.b;//此時c的值為3

更改後的test2.js代碼:

var _test2 = {     a : 3,     b : 4,     c : 0 }; _test2.c = _test2.a + _test2.b;//此時c的值為7

修改後的html代碼如下:

<html>

<head>

</head>

<body>

<script src="test1.js"></script>

<script src="test2.js"></script>

<script> alert(_test1.c);//對話框顯示3

alert(_test2.c);//對話框顯示7

</script>

</body>

</html>

跟磨途歌一起分析上邊的代碼,不難發現,test1.js與test2.js代碼中聲明的變量分別使用當前的文件名加一個下劃線來組成,例如編寫test1.js文件,那麼就在文件的開頭聲明一個全局變量

var _test1 = {}; //然後在需要的時候往變量裡添加需要的變量 //例如下邊的使用方式 _test1.x = 1; _test1.y = 2; _test1.z = test1.x + test1.y;

因為一般不會在同一個目錄創建兩個test1.js文件,這樣就很巧妙的避免了同名變量的出現。

還要注意一點,就是ie跟火狐或谷歌是有差異的,比如下邊的代碼:

var _test1 = {     a : 1,     b : 2,     c : 0, };

最後一個“c : 0,”聲明後邊加不加逗號,火狐浏覽器跟谷歌浏覽器都能解析,但是IE浏覽器就不行,IE浏覽器要求最後一個變量不能有逗號的出現,所以大家以後寫代碼,還是得照顧一下IE浏覽器的固執,改成下邊這麼寫:

var _test1 = {     a : 1,     b : 2,     c : 0 };

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