js 作用域和變量詳解
一、說(shuō)起變量的提升呢，首先我們先看一段簡(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
好了，接下來(lái)在看這段代碼：
<!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é)果呢？
這就跟剛開(kāi)始提到的變量提升有關(guān)系哦~~~下面我們來(lái)做下總結(jié)：
最后一段代碼展現(xiàn)了2個(gè)知識(shí)點(diǎn)：
1、變量提升
2、作用域鏈
首先來(lái)說(shuō)作用域鏈，js訪問(wèn)一個(gè)變量時(shí)會(huì)優(yōu)先在該作用域內(nèi)（訪問(wèn)時(shí)的那個(gè)作用域）尋找是否聲明過(guò)這個(gè)變量，如果該變量已經(jīng)存在，則直接使用它的值，否則會(huì)尋找該作用域的‘父作用域/上級(jí)作用域'，依次類推，直到找到全局作用域?yàn)橹埂?/p>
關(guān)于變量提升是指：js在解析的時(shí)候總是會(huì)將var，function這類關(guān)鍵詞的聲明語(yǔ)句提升至作用域的最頂部（注意：這里只會(huì)提升聲明的部分，賦值不會(huì)被提升）
所以，由此看來(lái)，上述的那段代碼就等于：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function () {
var v; //先將該作用域下的變量提升，但沒(méi)有賦值
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í)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
用javascript 控制表格行的展開(kāi)和隱藏的代碼
用javascript 控制表格行的展開(kāi)和隱藏的代碼...2007-08-08
這是前端面試的經(jīng)典題型，要去找工作的小伙伴看看還是有幫助的,需要的朋友可以參考下2017-06-06
js中forEach，for in，for of循環(huán)的用法示例小結(jié)
這篇文章主要介紹了js中forEach，for in，for of循環(huán)的用法,結(jié)合實(shí)例形式總結(jié)分析了js中forEach，for in，for of循環(huán)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
在JavaScript中使用for循環(huán)的方法詳解
在本文中，我們將學(xué)習(xí) JavaScript 中提供，的 for 循環(huán)，我們將了解如何在 JavaScript 中使用 for...in 循環(huán)語(yǔ)句、其語(yǔ)法、工作原理示例、何時(shí)使用或避免使用它以及我們可以使用哪些其他類型的循環(huán),需要的朋友可以參考下2023-07-07
Bootstrap Tooltip顯示換行和左對(duì)齊的解決方案
