快捷導(dǎo)航

js 作用域和變量詳解

更新時(shí)間：2017年02月16日 15:35:20 作者：summer_88

本文主要介紹了js 的作用域和變量的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

一、說(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)文章

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),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Open and Print a Word Document
Open and Print a Word Document...
2007-06-06
JS算法題之查找數(shù)字在數(shù)組中的索引位置
這篇文章主要給大家介紹了關(guān)于JS算法題之查找數(shù)字在數(shù)組中的索引位置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果
這篇文章主要為大家詳細(xì)介紹了原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript利用正則表達(dá)式來(lái)禁止鍵盤輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤輸入數(shù)字，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
js獲取窗口相對(duì)于屏幕左邊和上邊的位置坐標(biāo)
這篇文章主要介紹了js如何獲取窗口相對(duì)于屏幕左邊和上邊的位置,需要的朋友可以參考下
2014-05-05
一些實(shí)用性較高的js方法
這篇文章主要為大家分享了一些實(shí)用性較高的js方法，方便大家開(kāi)發(fā)時(shí)使用，感興趣的小伙伴們可以參考一下
2016-04-04
關(guān)于圖片的預(yù)加載過(guò)程中隱藏未知的
相信大家都看到過(guò)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