js 執行 詞法分析階段：包括分析形參、分析變量聲明、分析函數聲明三個部分。通過詞法分析將我們寫的 js 代碼轉成可以執行的代碼。 執行階段變量提升 只有聲明被提升，初始化不會被提升 聲明會被提升到當前作用域的頂端

🌰 1:

console.log(num)var numnum = 6

預編譯之后

var numconsole.log(num) // undefinednum = 6

🌰 2:

num = 6console.log(num)var num

預編譯之后

var numnum = 6console.log(num) // 6

🌰 3:

function bar() { if (!foo) {var foo = 5 } console.log(foo) // 5}bar()

預編譯之后

function bar() { var foo // if語句內的聲明提升 if (!foo) {foo = 5 } console.log(foo)}bar()函數提升 函數聲明和初始化都會被提升 函數表達式不會被提升

🌰 1: 函數聲明可被提升

console.log(square(5)) // 25function square(n) { return n * n}

預編譯之后

function square(n) { return n * n}console.log(square(5))

🌰 2: 函數表達式不可被提升

console.log(square) // undefinedconsole.log(square(5)) // square is not a functionvar square = function(n) { return n * n}

預編譯之后

var squareconsole.log(square)console.log(square(5))square = function() { return n * n}

🌰 3:

function bar() { foo() // 2 var foo = function() {console.log(1) } foo() // 1 function foo() {console.log(2) } foo() // 1}bar()

預編譯之后：

function bar() { var foo foo = function foo() {console.log(2) } foo() // 2 foo = function() {console.log(1) } foo() // 1 foo() // 1}函數提升在變量提升之前

🌰 1:

console.log(foo) // 會打印出函數function foo() { console.log(’foo’)}var foo = 1

🌰 2:

var foo = ’hello’ // hello;(function(foo) { console.log(foo) var foo = foo || ’world’ console.log(foo) //hello})(foo)console.log(foo) // hello

預編譯之后

var foo = ’hello’;(function(foo) { var foo foo = ’hello’ // 傳入參數的foo值 console.log(foo) // hello foo = foo || ’world’ // foo有值為hello，所以沒有賦值為world console.log(foo) // hello})(foo)console.log(foo) // hello, 打印的事全局作用域下的var foo = ’hello’JS變量提升和函數提升的順序

最近筆試時碰到考察變量提升與函數提升順序的一道題目，之前只知道var定義的變量會有變量提升以及函數聲明也會提升，但沒有深入研究他們的順序以及詳細過程。事后查閱資料加上自己的驗證，得出了自己對于它們順序的一些理解，話不多說，直接進入正題。

首先給出我的結論：函數提升優先級高于變量提升，且不會被同名變量聲明時覆蓋，但是會被同名變量賦值后覆蓋

大家可以看下面這段代碼：

console.log(a) // ƒ a(){} 變量a賦值前打印的都會是函數a var a=1; function a(){} console.log(a) // 1 變量a賦值后打印的都會是變量a的值

首先變量和函數聲明都提升，但函數提升優先級高于變量，都提升后變量只是定義沒有賦值，所以輸出的是函數a。詳細過程如下：

function a(){} // 函數聲明提升 a-> f a (){} var a;// 變量提升 console.log(a) // 此時變量a只是聲明沒有賦值所以不會覆蓋函數a --> 輸出函數a f a (){} a=1; //變量賦值 console.log(a) // 此時變量a賦值了 --> 輸出變量a的值 1

總結：由于函數聲明和變量都會提升，如果函數與變量同名，那么只要在變量賦值前打印的都會是函數，在變量賦值之后打印都是變量的值。

現在讓我們再看一段代碼：

a(); // 2 var a = function(){ // 看成是一個函數賦值給變量aconsole.log(1) } a(); // 1 function a(){console.log(2) } a(); // 1

其實只是想告訴大家只有函數聲明才會提升函數表達式不會提升，所以在函數表達式后面的代碼會輸出1，因為變量a賦值后把提升的函數a覆蓋了。詳細過程如下：

function a(){ // 函數提升 console.log(2) } var a; // 變量提升 a(); // 2 a = function(){ // 變量a賦值后覆蓋上面的函數a console.log(1) } a(); // 1 a(); // 1

再看一段代碼：

a(); function a(){ console.log(1) } function a(){ console.log(2) }

打印的是2，道理很簡單先聲明的會被后聲明的覆蓋。

總結

到此這篇關于JavaScript中變量提升和函數提升的文章就介紹到這了,更多相關js變量提升和函數提升內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！