web面試中JS預解析與變量提升區別是什么

本篇文章給大家分享的是有關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預解析與變量提升區別是什么，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。