javascript變量提高

本篇分爲三章節來說，主要從下面幾個點講起

• 函數做用域
• IIFE
• 塊級做用域

1、函數級做用域

讓咱們先看一段代碼

var a = true;

function hoisting(){
    if(!a){
        var a = 2;
    }
    console.log(a)
}

hoisting();
// 最終結果：2

這段代碼的邏輯是

1. 首先會尋找當前函數域中的變量。
2. 若是存在，即先聲明變量首部，不存在則從父級再次尋找
3. 直到找到爲止。

那麼咱們能夠改寫爲

var a; // 變量聲明 
a = true; // 變量定義

function hoisting(){
    var a; // 變量聲明
    if(!a){
        a = 2; //變量定義
    }
    console.log(a) // 先從自身函數域開始查找，找不到再去父做用域
}

hoisting();

javascript的變量是以函數爲做用域而存在的，當本地查找不到時會去父級查找。

2、解決方案：閉包IIFE

可能和本文關係不大~~，主要是閉包構建新的函數域。

當即執行函數表達式：Immediately Invoked Function Expression

他的做用就是在變量被調用以前就給變量賦值

var a = (function(){
    var a = 3
    return a
}())

3、解決方案：let,const

let與const主要做用是講javascript原來的函數級做用域調整到塊級做用域

let a = 2;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 2

這個時候，函數的做用域就被劃分的更小了，以塊級爲單位。

咱們能夠將代碼分紅三個塊

• if塊
• block塊
• window塊

好，如今咱們改寫一下函數會怎樣呢

let a = 0;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 0

最終結果是0，當a在當前塊block查找不到的時候會去父級塊查找，最後爲0

而if塊內的變量只在塊內有效