javascript中局部變量和全局變量的區(qū)別詳解
javascript有兩種變量:局部變量和全局變量。當(dāng)然,我們這篇文章是幫助大家真正的區(qū)別這兩種變量。
首先,局部變量是指只能在本變量聲明的函數(shù)內(nèi)部調(diào)用。全局變量時(shí)整個(gè)代碼中都可以調(diào)用的變量。當(dāng)然,單單從字面上理解肯定是不清楚的,下面我詳細(xì)的介紹下:
大家都知道,變量是需要用var關(guān)鍵字聲明的。但是javascript中也可以隱式的使用變量,就是不用聲明,直接使用。而且,千萬(wàn)注意,javascript把隱式聲明的變量總是當(dāng)成全局變量來(lái)使用的。
例如:
function myName() {
i = 'yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();
輸出結(jié)果為:yuanjianhang
這說(shuō)明變量i就是一個(gè)全局的變量,如果把上面的代碼改成如下:
function myName() {
var i='yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();
此時(shí),游覽器將沒(méi)有任何輸出結(jié)果,因?yàn)閕 是在函數(shù)myName中定義的,所以它只是myName的局部變量,不可能被外部調(diào)用。
現(xiàn)在再回過(guò)頭來(lái)看下面的代碼:
function myName() {
i = 'yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();
現(xiàn)在,我們進(jìn)行一下改動(dòng),把myName();去掉,代碼如下:
function myName() {
i = 'yuanjianhang';
}
function sayName() {
alert(i);
}
sayName();
此時(shí),游覽器也不會(huì)有如何反應(yīng)。因?yàn)殡m然i是全局變量,但是函數(shù)myName()并沒(méi)有被調(diào)用,所以就相當(dāng)于雖然聲明了i,但是并沒(méi)有給i賦予任何的值,所以沒(méi)有任何輸出。
同理,如果把上例改成:
function myName() {
i = 'yuanjianhang';
}
function sayName() {
alert(i);
}
sayName();
myName();
這種情況下還是不會(huì)輸出任何結(jié)果,javascript代碼的執(zhí)行時(shí)從上到下的,在sayName()函數(shù)被調(diào)用時(shí)會(huì)檢查變量i的值,此時(shí)函數(shù)myName尚未執(zhí)行,也就是說(shuō)i還沒(méi)有被賦值,所以不會(huì)輸出任何結(jié)果。
為了方便大家更好的理解,這里再舉一個(gè)例子:
var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
}
myloveName();
function myName() {
alert(i);
}
myName();
這次的結(jié)果是什么呢?
答案是guanxi
首先,i的原始值是yuanjianhang,但是當(dāng)調(diào)用myloveName()函數(shù)之后,將i的值改為guanxi,所以最后的輸出結(jié)果是guanxi。
如果將代碼改為:
var i = 'yuanjianhang';
function myloveName() {
var i = 'guanxi';
}
myloveName();
function myName() {
alert(i);
}
myName();
此時(shí)的結(jié)果就是yuanjianhang了,因?yàn)榇a中的兩個(gè)i不一樣,一個(gè)是全局的,一個(gè)是局部的,也可以這樣理解,雖然兩個(gè)i的名字一樣,但是這兩個(gè)i的本質(zhì)卻不一樣,好像有兩個(gè)名字一樣的人一樣,雖然名字一樣,但卻不是同一個(gè)人。
如果將代碼改造成這樣:
var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
}
function myName() {
alert(i);
}
myName();
myloveName();
相信大家可以自己算出結(jié)果了,結(jié)果是yuanjianhang。
既然函數(shù)內(nèi)部可以調(diào)用全局變量,那么下面這種情況呢:
var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
alert(i);
}
myloveName();
此時(shí)變量的值是哪個(gè)呢?
我們來(lái)分析下:
首先全局變量i被賦值為:yuanjianhang。
接下來(lái)myloveName()函數(shù)被調(diào)用,全局變量i被重新賦予新的值:guanxi
所以結(jié)果肯定是:guanxi。
如果我們把a(bǔ)lert提前呢,像這樣:
var i = 'yuanjianhang';
function myloveName() {
alert(i);
i = 'guanxi';
}
myloveName();
這時(shí)候結(jié)果是什么呢?
經(jīng)過(guò)驗(yàn)證結(jié)果是:undefined
如果代碼是這樣呢:
var i = 'yuanjianhang';
function myloveName() {
alert(i);
}
myloveName();
此時(shí)i的結(jié)果是:yuanjianhang
為什么會(huì)發(fā)生上面undefined情況,因?yàn)榇a的執(zhí)行順序是從上到下的,在輸出i之前并沒(méi)有對(duì)i定義。所以從這里可以看出,使用代碼的時(shí)候,變量的聲明一定要放到代碼的前面,以避免出現(xiàn)類(lèi)似的問(wèn)題!
同理:
var i = 'yuanjianhang';
function myloveName() {
alert(i);
var i = 'guanxi';
}
myloveName();
這種情況下也會(huì)輸出:undefined
好了,關(guān)于變量我只有這么多的介紹了,相信這些任何人都可以看明白。不管代碼如何復(fù)制,其核心是不會(huì)變的。
以上就是本文的全部?jī)?nèi)容了,小伙伴們對(duì)于javascript中局部變量和全局變量的區(qū)別是否有了更深刻的認(rèn)識(shí)了呢,祝大家新年快樂(lè)~學(xué)習(xí)愉快。
相關(guān)文章
JSON字符串和對(duì)象相互轉(zhuǎn)換實(shí)例分析
這篇文章主要介紹了JSON字符串和對(duì)象相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式分析了json格式數(shù)據(jù)的轉(zhuǎn)換方法,涉及javascript正則與字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-06-06關(guān)于ligerui子頁(yè)面關(guān)閉后,父頁(yè)面刷新,重新加載的方法
今天小編就為大家分享一篇關(guān)于ligerui子頁(yè)面關(guān)閉后,父頁(yè)面刷新,重新加載的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析
匿名函數(shù)就是沒(méi)有函數(shù)名的函數(shù)。這篇文章主要介紹了Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析的相關(guān)資料,需要的朋友可以參考下2016-05-05js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解
下面小編就為大家?guī)?lái)一篇js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解
這篇文章主要介紹了如何通過(guò)JavaScript語(yǔ)言實(shí)現(xiàn)動(dòng)圖表格的生成以及動(dòng)態(tài)效果的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-02-02