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.

不過結果是

我機智的認爲 預想錯了？

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

        a()
複製代碼

這樣？對比一下結果 人工解析結果 ： 一、a() 二、1 三、1 四、a() 報錯

瀏覽器執行結果：

沒毛病！

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

既然標題說到了 變量 和 函數，咱們就一塊來講說

//簡單的栗子
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()
複製代碼

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

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()
複製代碼

執行結果

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

終於完了！

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