JavaScript中變量提升和函數提升實(shí)例詳解

js 執行

• 詞法分析階段：包括分析形參、分析變量聲明、分析函數聲明三個(gè)部分。通過(guò)詞法分析將我們寫(xiě)的 js 代碼轉成可以執行的代碼。
• 執行階段

變量提升

• 只有聲明被提升，初始化不會(huì )被提升
• 聲明會(huì )被提升到當前作用域的頂端

🌰 1:

console.log(num)
var num
num = 6

預編譯之后

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

🌰 2:

num = 6
console.log(num)
var num

預編譯之后

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

🌰 3:

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

預編譯之后

function bar() {
    var foo // if語(yǔ)句內的聲明提升
    if (!foo) {
        foo = 5
    }
    console.log(foo)
}
bar()

函數提升

• 函數聲明和初始化都會(huì )被提升
• 函數表達式不會(huì )被提升

🌰 1: 函數聲明可被提升

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

預編譯之后

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

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

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

預編譯之后

var square
console.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) // 會(huì )打印出函數

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，所以沒(méi)有賦值為world
    console.log(foo) // hello
})(foo)
console.log(foo) // hello, 打印的事全局作用域下的var foo = 'hello'

JS變量提升和函數提升的順序

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

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

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

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

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

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

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

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

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

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

     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，道理很簡(jiǎn)單先聲明的會(huì )被后聲明的覆蓋。

總結

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