JavaScript中變量提升和函數(shù)提升的方法

這篇文章主要介紹了JavaScript中變量提升和函數(shù)提升的方法的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript中變量提升和函數(shù)提升的方法文章都會有所收獲，下面我們一起來看看吧。

js 執(zhí)行

• 詞法分析階段：包括分析形參、分析變量聲明、分析函數(shù)聲明三個部分。通過詞法分析將我們寫的 js 代碼轉(zhuǎn)成可以執(zhí)行的代碼。

• 執(zhí)行階段

變量提升

• 只有聲明被提升，初始化不會被提升

• 聲明會被提升到當(dāng)前作用域的頂端

? 1:

console.log(num)
var num
num = 6

預(yù)編譯之后

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

? 2:

num = 6
console.log(num)
var num

預(yù)編譯之后

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

? 3:

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

預(yù)編譯之后

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

函數(shù)提升

• 函數(shù)聲明和初始化都會被提升

• 函數(shù)表達(dá)式不會被提升

? 1: 函數(shù)聲明可被提升

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

預(yù)編譯之后

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

? 2: 函數(shù)表達(dá)式不可被提升

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

預(yù)編譯之后

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()

預(yù)編譯之后：

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

函數(shù)提升在變量提升之前

? 1:

console.log(foo) // 會打印出函數(shù)

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

預(yù)編譯之后

var foo = "hello"
;(function(foo) {
    var foo
    foo = "hello" // 傳入?yún)?shù)的foo值
    console.log(foo) // hello
    foo = foo || "world" // foo有值為hello，所以沒有賦值為world
    console.log(foo) // hello
})(foo)
console.log(foo) // hello, 打印的事全局作用域下的var foo = "hello"

JS變量提升和函數(shù)提升的順序

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

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

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

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

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

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

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

現(xiàn)在讓我們再看一段代碼：

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

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

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

再看一段代碼：

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

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

關(guān)于“JavaScript中變量提升和函數(shù)提升的方法”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript中變量提升和函數(shù)提升的方法”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。