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