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)類似的問(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)文章
fetch是一種HTTP數(shù)據(jù)請(qǐng)求的方式,是XMLHttpRequest的一種替代方案,fetch不是ajax的進(jìn)一步封裝,而是原生js,下面這篇文章主要給大家介紹了關(guān)于js fetch異步請(qǐng)求使用的相關(guān)資料,需要的朋友可以參考下2021-11-11
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。本文給大家介紹Bootstrap 頁(yè)面排版樣式的相關(guān)知識(shí)，希望對(duì)大家有所幫助！2016-04-04
js判斷對(duì)象是否擁有某個(gè)key的兩種方法對(duì)比
JS中數(shù)組和對(duì)象是等同的,我們經(jīng)常遇到需要判斷一個(gè)key是否存在于對(duì)象中的情況,這篇文章主要給大家介紹了關(guān)于如何利用js判斷對(duì)象是否擁有某個(gè)key的兩種方法對(duì)比,需要的朋友可以參考下2023-12-12
js獲取圖片base64的正確實(shí)現(xiàn)方式
這篇文章主要給大家介紹了關(guān)于js獲取圖片base64的正確實(shí)現(xiàn)方式,BLOB是二進(jìn)制大對(duì)象,是一個(gè)可以存儲(chǔ)二進(jìn)制文件的容器,?在計(jì)算機(jī)中BLOB常常是數(shù)據(jù)庫(kù)中用來(lái)存儲(chǔ)二進(jìn)制文件的字段類型,需要的朋友可以參考下2024-01-01
js中判斷文本框是否為空的兩種方法，需要的朋友可以參考下。2011-07-07
parseInt是一種字符串轉(zhuǎn)數(shù)字的,下面這篇文章主要給大家介紹了關(guān)于Js中parseInt的使用及注意事項(xiàng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
利用JavaScript實(shí)現(xiàn)放鞭炮動(dòng)畫效果
談及過(guò)年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的放鞭炮動(dòng)畫效果，感興趣的小伙伴可以了解一下2023-01-01
javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
javascript 控制 html元素 顯示/隱藏，下面是一些逐步的實(shí)現(xiàn)原理。2009-09-09
javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)
這篇文章主要介紹了javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)的相關(guān)資料,這里提供了四種方法，幫助大家整理，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了javaScript中this用法,實(shí)例分析了javascript中this的用途與相關(guān)的使用技巧,需要的朋友可以參考下2015-05-05