js 作用域和變量詳解
一、說起變量的提升呢，首先我們先看一段簡(jiǎn)單的代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var v = 'hello world'; alert(v); </script> </body> </html>
以上代碼執(zhí)行的結(jié)果是hello world
然后在看一段代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function(){
alert(v);
})();
</script>
</body>
</html>
執(zhí)行的結(jié)果和第一段代碼一樣hello world
好了，接下來在看這段代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function(){
alert(v);
var v='I love you';
alert(v);
})();
</script>
</body>
</html>
以上代碼執(zhí)行的結(jié)果： 第一個(gè)彈出的是undefined；第二個(gè)結(jié)果是I love you。為什么會(huì)有這樣的結(jié)果呢？
這就跟剛開始提到的變量提升有關(guān)系哦~~~下面我們來做下總結(jié)：
最后一段代碼展現(xiàn)了2個(gè)知識(shí)點(diǎn)：
1、變量提升
2、作用域鏈
首先來說作用域鏈，js訪問一個(gè)變量時(shí)會(huì)優(yōu)先在該作用域內(nèi)（訪問時(shí)的那個(gè)作用域）尋找是否聲明過這個(gè)變量，如果該變量已經(jīng)存在，則直接使用它的值，否則會(huì)尋找該作用域的‘父作用域/上級(jí)作用域'，依次類推，直到找到全局作用域?yàn)橹埂?/p>
關(guān)于變量提升是指：js在解析的時(shí)候總是會(huì)將var，function這類關(guān)鍵詞的聲明語句提升至作用域的最頂部（注意：這里只會(huì)提升聲明的部分，賦值不會(huì)被提升）
所以，由此看來，上述的那段代碼就等于：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function () {
var v; //先將該作用域下的變量提升，但沒有賦值
alert(v); //所以此時(shí)是undefined
var v='I love you';
alert(v); //I love you
})();
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
javascript模擬的Ping效果代碼 （Web Ping）
JS雖然發(fā)送不了真正Ping的ICMP數(shù)據(jù)包,但Ping的本質(zhì)仍然是請(qǐng)求/回復(fù)的時(shí)間差,HTTP自然可以實(shí)現(xiàn)此功能.2011-03-03
微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝的具體實(shí)現(xiàn)
大家做小程序項(xiàng)目的時(shí)候肯定會(huì)遇到數(shù)據(jù)對(duì)接需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝的具體實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Open and Print a Word Document
Open and Print a Word Document...2007-06-06
這篇文章主要給大家介紹了關(guān)于JS算法題之查找數(shù)字在數(shù)組中的索引位置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS仿QQ閱讀點(diǎn)擊展開、收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript利用正則表達(dá)式來禁止鍵盤輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來禁止鍵盤輸入數(shù)字，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
js獲取窗口相對(duì)于屏幕左邊和上邊的位置坐標(biāo)
這篇文章主要介紹了js如何獲取窗口相對(duì)于屏幕左邊和上邊的位置,需要的朋友可以參考下2014-05-05
這篇文章主要為大家分享了一些實(shí)用性較高的js方法，方便大家開發(fā)時(shí)使用，感興趣的小伙伴們可以參考一下2016-04-04
相信大家都看到過ie下的內(nèi)存泄漏模式的文章，其中有一個(gè)模式就是循環(huán)引用，而閉包就有保存外部運(yùn)行環(huán)境的能力（依賴于作用域鏈的實(shí)現(xiàn)），所以img.onload這個(gè)函數(shù)內(nèi)部又保存了對(duì)img的引用，這樣就形成了循環(huán)引用，導(dǎo)致內(nèi)存泄漏2012-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12