Javascript學(xué)習(xí)筆記二 之 變量
更新時間：2010年12月15日 21:58:24 作者：
上面描述了數(shù)據(jù)類型,學(xué)習(xí)完數(shù)據(jù)類型就不得不提到變量。
一.關(guān)于Javascript變量聲明
在Javascript中，聲明一個變量
var a=1;
也可以直接
a=1;
這兩種表達是有區(qū)別的，
一個是當(dāng)前作用域的局部變量，另一個則是當(dāng)前作用域的全局變量；
Javascript語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量?！?
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函數(shù)外部自然無法讀取函數(shù)內(nèi)的局部變量。
function f1(){
var n=999;
}
alert(n); // error
二.Javascript變量作用域鏈
var x='000 ';
document.writeln(x); //得出'000 '
a();
function a(){
var x='aaa ';
function b(){
document.writeln(x); //undefined
var x='bbb ';
document.writeln(x); //bbb
}
b();
document.writeln(x); //aaa
}
//結(jié)果是：000 undefined bbb aaa
原理：
當(dāng)變量使用時，先從函數(shù)塊（權(quán)威指南中用調(diào)用對象來解釋）中找，
如果找不到，從上一級函數(shù)塊找，直到找到，
如果直到頂層代碼（指var x='000 ';的位置）還沒找到定義，代碼會報未定義錯誤。
1.按順序執(zhí)行的順序，輸出x '000 '（這個沒問題）;
2.然后執(zhí)行a()
3.在a()中執(zhí)行b()
4.b()中需要輸出x,該函數(shù)體內(nèi)（作用域）有x定義，但是還未賦值，因此輸出undefined；（重點?。?
5.然后再輸出x,x已賦值，因此輸出bbb;
6.最后輸出aaa;
了解了以上原理，我們來看下面的例子
var x = "global";
function f() {
var x='f1';
function f2(){
x='f2' ;//這里我有些混淆,GLOBAL的X應(yīng)該重新被賦值為'f2'
alert(x); //返回"f2"
alert(window.x); //返回"global"
}
f2();
alert(x) //返回"f2"
}
f();
alert(x); //返回"global",沒有被重新賦值為:f2
//結(jié)果分別彈出：f2 global f2 global
解釋：
首先執(zhí)行f()中的f2(),
f2()為內(nèi)部函數(shù)產(chǎn)生一個作用域，因此x=‘f2'修改的是f()中的x值，而非全局x.
alert(x);為‘f2',alert(window.x)為‘global'.
然后執(zhí)行alert(x);這個x的作用域為全局，為‘global'
三.給新手的建議
1.減少全局變量（解決方案：把變量封裝到對象中）
引用:
“把你踩在全局的那些亂七八糟的腳印都歸于一人名下，能顯著降低與其他應(yīng)用、小工具或JS庫沖突的可能性?！?
– Douglas Crockford
var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name
更好的寫法
var DudeNameSpace = {
name : 'Jeffrey',
lastName : 'Way',
doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
注意看，我們是如何戲劇化地把“亂七八糟的腳印”都歸到“DudeNameSpace”這對象之下的；
2.一長列變量聲明？別寫那么多var，用逗號吧
var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';
更好的寫法
var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';
不言自明。我不知道這樣做能否提升代碼執(zhí)行速度，但是確實讓你的代碼干凈許多。
在Javascript中，聲明一個變量
var a=1;
也可以直接
a=1;
這兩種表達是有區(qū)別的，
一個是當(dāng)前作用域的局部變量，另一個則是當(dāng)前作用域的全局變量；
Javascript語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量?！?
復(fù)制代碼 代碼如下:
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面，在函數(shù)外部自然無法讀取函數(shù)內(nèi)的局部變量。
復(fù)制代碼 代碼如下:
function f1(){
var n=999;
}
alert(n); // error
二.Javascript變量作用域鏈
復(fù)制代碼 代碼如下:
var x='000 ';
document.writeln(x); //得出'000 '
a();
function a(){
var x='aaa ';
function b(){
document.writeln(x); //undefined
var x='bbb ';
document.writeln(x); //bbb
}
b();
document.writeln(x); //aaa
}
//結(jié)果是：000 undefined bbb aaa
原理：
當(dāng)變量使用時，先從函數(shù)塊（權(quán)威指南中用調(diào)用對象來解釋）中找，
如果找不到，從上一級函數(shù)塊找，直到找到，
如果直到頂層代碼（指var x='000 ';的位置）還沒找到定義，代碼會報未定義錯誤。
1.按順序執(zhí)行的順序，輸出x '000 '（這個沒問題）;
2.然后執(zhí)行a()
3.在a()中執(zhí)行b()
4.b()中需要輸出x,該函數(shù)體內(nèi)（作用域）有x定義，但是還未賦值，因此輸出undefined；（重點?。?
5.然后再輸出x,x已賦值，因此輸出bbb;
6.最后輸出aaa;
了解了以上原理，我們來看下面的例子
復(fù)制代碼 代碼如下:
var x = "global";
function f() {
var x='f1';
function f2(){
x='f2' ;//這里我有些混淆,GLOBAL的X應(yīng)該重新被賦值為'f2'
alert(x); //返回"f2"
alert(window.x); //返回"global"
}
f2();
alert(x) //返回"f2"
}
f();
alert(x); //返回"global",沒有被重新賦值為:f2
//結(jié)果分別彈出：f2 global f2 global
解釋：
首先執(zhí)行f()中的f2(),
f2()為內(nèi)部函數(shù)產(chǎn)生一個作用域，因此x=‘f2'修改的是f()中的x值，而非全局x.
alert(x);為‘f2',alert(window.x)為‘global'.
然后執(zhí)行alert(x);這個x的作用域為全局，為‘global'
三.給新手的建議
1.減少全局變量（解決方案：把變量封裝到對象中）
引用:
“把你踩在全局的那些亂七八糟的腳印都歸于一人名下，能顯著降低與其他應(yīng)用、小工具或JS庫沖突的可能性?！?
– Douglas Crockford
復(fù)制代碼 代碼如下:
var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name
更好的寫法
復(fù)制代碼 代碼如下:
var DudeNameSpace = {
name : 'Jeffrey',
lastName : 'Way',
doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
注意看，我們是如何戲劇化地把“亂七八糟的腳印”都歸到“DudeNameSpace”這對象之下的；
2.一長列變量聲明？別寫那么多var，用逗號吧
復(fù)制代碼 代碼如下:
var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';
更好的寫法
復(fù)制代碼 代碼如下:
var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';
不言自明。我不知道這樣做能否提升代碼執(zhí)行速度，但是確實讓你的代碼干凈許多。
相關(guān)文章
這篇文章主要介紹了JavaScript中l(wèi)ength屬性的使用方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
javascript編程起步（第一課）...2007-01-01
這篇文章主要介紹了javascript打開word文檔的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了深入理解JavaScript編程中的原型概念,包括prototype屬性的使用等一些相關(guān)知識,需要的朋友可以參考下2015-06-06
淺談checkbox的一些操作(實戰(zhàn)經(jīng)驗)
checkbox看起來很簡單，有時很頭疼，有什么難的，下面就為大家介紹下checkbox的一些操作，不了解的朋友不要錯過2013-11-11
JavaScript 學(xué)習(xí)筆記之操作符（續(xù)）
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符，今天我們繼續(xù)講解剩下的幾個操作符，包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號操作符，小伙伴們仔細研讀下吧，對提高自己對于javascript的理解很有幫助。2015-01-01
這篇文章主要介紹了淺談javascript 函數(shù)內(nèi)部屬性的相關(guān)資料,需要的朋友可以參考下2015-01-01
本文詳細講解了javascript中instanceof運算符的用法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Javascript學(xué)習(xí)筆記8 用JSON做原型
在Javascript學(xué)習(xí)筆記5 類和對象中，我簡單地提到了利用JSON去構(gòu)造一個對象。2010-01-01
javascript中對Date類型的常用操作小結(jié)
下面小編就為大家?guī)硪黄猨avascript中對Date類型的常用操作小結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05