Javascript 函式和變數提升

我是一個前端發表於2019-02-18
JavaScript函式變數
變數提升和函式提升基本上是面試必問題目
//先從一個面試題說起
        console.log(a)
        if (a) {
            var a = 1;
            console.log(a)
        }

        function a() {
            console.log(this);
        }
        console.log(a);

        a()
        
複製程式碼

下面我們針對這個栗子解析一下

我們知道變數和函式定義都會提升到作用域最前邊

唯一需要確認的是變數和函式的先後順序

我們預想 函式是用第一公民會不會提升到最前邊呢？

//如果是解析完順序是這樣的
        function a() {
            console.log(this);
        }
        var a;
        console.log(a)
        if (a) {
            a = 1;
            console.log(a)
        }
        console.log(a);

        a()
複製程式碼

按照我們預想的解析結果應該是

// undefined // undefined // 報錯

理由 函式在上var在下，第一個console時a未賦值，其結果是undefined，if為false 只剩最後一個console也是undefined 最後a is not a function.

不過結果是

image.png

我機智的認為 預想錯了？

//再次測試
        var a;
        function a() {
            console.log(this);
        }
        console.log(a)
        if (a) {
            a = 1;
            console.log(a)
        }
        console.log(a);

        a()
複製程式碼

這樣？對比一下結果 人工解析結果 ： 1、a() 2、1 3、1 4、a() 報錯

瀏覽器執行結果：

image.png
沒毛病！

看到這裡一切完美，不過我還是重新搜尋了一些高質量文章，發現我錯了，雖然執行結果是對的，不過瀏覽器和人工解析還是不一樣的，和我們最開始預想的一樣，函式優先。

既然標題說到了 變數 和 函式，我們就一塊來說說

//簡單的栗子
function a(){ console.log(a) }
console.log(a)
var a = 1
a()
複製程式碼

首先上邊已經說到我們預想和認為的是錯的。

正確解析順序是這樣的

function a(){ console.log(a) }
var a;
console.log(a)
a = 1
a()
複製程式碼

但是，這個但是很重要瀏覽器執行結果是：

image.png
why？這就要講講我所瞭解到的原理。

同名變數和函式，函式會提升到最前邊，變數其次，那為什麼結果不是我們人工執行的undefined呢？原因是 變數會被忽略，是的是忽略。。。

function a(){ console.log(a) }
var a;//忽略
console.log(a) //列印函式本身
a = 1
a()// a is not a function
複製程式碼

完美！

還有呢？是的還有同名變數是怎樣的順序，同名函式是怎樣的順序。

同名變數
console.log(a)
var a = 1
console.log(a)
var a = 2
console.log(a)

//解析完順序是這樣的

var a；
var a; //忽略
console.log(a) // undfined
a = 1
console.log(a) //1
a = 2
console.log(a)//2
複製程式碼

*同名變數，宣告會被提升，後邊會忽略。

同名函式
function a(){console.log(1)}
console.log(a)
function a(){console.log(2)}
console.log(a)
a()

//解析完
function a(){console.log(1)}
function a(){console.log(2)}
console.log(a)
console.log(a)
a()
複製程式碼

執行結果

image.png

我想你已經猜到了，同名函式會被覆蓋。

終於完了！

您的點贊是我繼續下去的動力，謝謝！

相關文章