web面試之JS預解析與變量提升區別
什麼是預解析?
概念:
JS代碼在在代碼從上往下執行前,瀏覽器會先把所有變量聲明解析一遍, 這個階段叫預解析。
詳講
尋找作用域中的var 和function聲明(匿名函數沒有function聲明,所以不會提升),然後對其進行事先聲明, 並把賦值操作留在原地,再從上到下執行代碼。這就是一個預解析的過程。
變量和函數預解析的區別
在預解析時,會把所有用 var
聲明的變量, 和 function
聲明的函數,提升到所在的作用域最頂端
var
聲明的變量, 在預解析的時, 隻是提前瞭聲明, 賦值語句依然留在原地;
function
聲明的函數, 在預解析的時, 會提前聲明並同時定義, 函數執行的時候,函數內部才會進行預解析。
註意: 匿名函數沒有function聲明,所以不會提升
重復聲明var變量
var重復聲明時:若已經存在,編譯器會忽略 var
繼續向下編譯;
若不存在,則順著作用域鏈向上查找,
若沒有找到,會在本作用域聲明該變量
變量提升和函數提升優先級
總結:
函數提升優先級高於變量提升,且不會被同名變量聲明時覆蓋,但是會被變量賦值後覆蓋
下面內容轉載自:
https://blog.csdn.net/caoyafeicyf/article/details/53172532
函數優先級大於變量優先級的深入探究
瀏覽器的預解析過程
先由一道小題進入本文
var foo; function foo(){} console.log(foo);
結果是函數體function foo(){}
接著下面一道題:
function foo(){}var foo;console.log(foo);
結果也是函數體
function foo(){}
所有就有很多人說,函數聲明的優先級大於變量聲明的優先級。
那麼,為什麼呢?這就要從瀏覽器的預解析說起瞭。
預解析流程
搜尋預解析關鍵字
尋找var關鍵字
尋找function關鍵字
執行預解析
先應用var關鍵字聲明的標識符,使這些標識符有定義
標識符有定以後,使用這項標識符就不會報錯瞭但因為沒有賦值,因此其值為undefined
至此標識符中保存瞭函數的引用
幾個需要註意的細節
- var 關鍵字對同一個標識符重復使用時,除第一次有效外,其他均做忽略處理。
- 預解析時先處理變量聲明,再處理函數聲明不
- 要糾結誰的優先級高,這些隻是表面現象
- 懂得瞭預解析流程,一切都是浮雲
看瞭預解析原理以後,下面咱們回到本文開頭的兩題,分析下預解析的過程,詳細的瞭解為什麼函數的優先級高於變量的優先級。follow me
先看第一個
var foo; function foo(){} console.log(foo);
預解析過程為:
var foo;<----變量聲明的var var foo;<----函數聲明抽出的var foo=function (){}<----函數聲明抽出的賦值 console.log(foo);
再來看第二個
function foo(){} var foo; console.log(foo);
預解析過程為:
var foo;<----變量聲明的var var foo;<----函數聲明抽出的var foo=function (){}<----函數聲明抽出的賦值 console.log(foo)
比較這兩個,你發現瞭什麼?原來他們的預解析過程一樣啊,這也就是為什麼函數優先級高於變量的原因瞭。
如果你理解瞭上面的內容,那麼下面再出一個題:
var a=1; function a(){} console.log(a);
這個瀏覽器是如何解析的呢?下面來跟著我的思路一起走:
1. 解析器首先搜尋var 關鍵字,結果第一行就發現瞭,把它提取到開頭。
2. 解析器搜尋function關鍵字,第二行發現瞭,首先分離var+函數名,此時發現和第一步的一樣,不做處理,然後開始分離函數的賦值,也就是a=function (){}
,此時a為函數體。
3. 解析器接著處理變量的賦值,a=1
,上一步的函數體被覆蓋掉,此時a=1。
4. 最後處理console.log(a)
,自然而然的結果為1。
下面是解析器處理的代碼過程:
var a;<----變量聲明的var var a;<----函數聲明抽出的var a=function (){}<----函數聲明抽出的賦值 a=1; console.log(a);
以上就是web面試之JS預解析與變量提升區別的詳細內容,更多關於JS預解析與變量提升的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- JavaScript的八種數據類型
- Python Map函數保姆級使用教程
- eclipse漢化及jdk安裝環境配置超詳細教程(Java安裝教程)
- python裝飾器原理源碼示例分析
- Imagenet2012數據集下載、介紹(推薦)