一、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 };