你不知道的JavaScript --- 做用域相關

本篇是《你不知道的JavaScript》的讀書筆記

什麼是做用域？

程序離不變量，那麼變量存儲在哪裏？程序須要時如何找到他們？

這些問題說明須要一套設計良好的規則來存儲變量， 而且以後能夠方便地找到這些變量。這套規則被稱爲做用域。

做用域負責收集並維護由全部聲明的標識符（變量） 組成的一系列查詢， 並實施一套很是嚴格的規則， 肯定當前執行的代碼對這些標識符的訪問權限。

做用域嵌套

當一個塊或函數嵌套在另外一個塊或函數中時， 就發生了做用域的嵌套。 所以， 在當前做用域中沒法找到某個變量時， 引擎就會在外層嵌套的做用域中繼續查找， 直到找到該變量，或抵達最外層的做用域（也就是全局做用域） 爲止。

function foo(a) { 
        console.log( a + b ); // foo的做用域中沒有變量b，去外層找
    }
    var b = 2;
    foo( 2 ); // 4

詞法做用域

剛學的時候就知道JavaScript是詞法做用域，那麼到底是什麼意思？

JavaScript的源代碼在執行以前會在編譯器中經歷詞法分析、語法分析、代碼生成等環節。

詞法化的過程會對源代碼中的字符進行檢查，若是是有狀態的解析過程，還會賦予單詞語義。詞法做用域是由你在寫代碼時將變量和塊做用域寫在哪裏決定的，所以當詞法分析器處理代碼時會保持做用域不變。

詞法做用域意味着做用域是由書寫代碼時函數聲明的位置來決定的。編譯的詞法分析階段基本可以知道所有標識符在哪裏以及是如何聲明的，從而可以預測在執行過程當中如何對它們進行查找。

做用域氣泡由其對應的做用域塊代碼寫在哪裏決定， 它們是逐級包含的。

欺騙詞法

正常狀況下，詞法做用域徹底由寫代碼期間函數所聲明的位置來定義。可是JavaScript也有兩種機制能夠在運行的時候來「修改」（也能夠說欺騙）詞法做用域。eval()和with。

JavaScript 引擎會在編譯階段進行數項的性能優化。其中有些優化依賴於可以根據代碼的詞法進行靜態分析，並預先肯定全部變量和函數的定義位置，才能在執行過程當中快速找到標識符。但若是引擎在代碼中發現了 eval(..) 或 with，它只能簡單地假設關於標識符位置的判斷都是無效的，由於沒法在詞法分析階段明確知道 eval(..) 會接收到什麼代碼，這些代碼會如何對做用域進行修改，也沒法知道傳遞給 with 用來建立新詞法做用域的對象的內容究竟是什麼。那麼全部的優化可能都是無心義的，所以最簡單的作法就是徹底不作任何優化。

若是代碼中大量使用 eval(..) 或 with ，那麼運行起來必定會變得很是慢。不管引擎多聰明，試圖將這些悲觀狀況的反作用限制在最小範圍內，也沒法避免若是沒有這些優化，代碼會運行得更慢這個事實。

提高

先看個小栗子

console.log(a)
    var a = 2;

直覺上認爲，JavaScript是從上而下一行一行執行的，應該會報錯ReferenceError. 但實際上這裏會輸出undefined.

引擎會在解釋 JavaScript 代碼以前首先對其進行編譯。編譯階段中的一部分工做就是找到全部的聲明，並用合適的做用域將它們關聯起來。包括變量和函數在內的全部聲明都會在任何代碼被執行前首先被處理。

因此上述栗子能夠理解爲

var a;
    console.log(a); // undefined
    a = 2;

定義在編譯階段進行，賦值留在原地等待執行階段，這個過程就叫作提高。

須要注意的是：

1. 函數聲明會被提高，可是函數表達式不會被提高

foo1(); // 'foo1'
    foo2(); // TypeError : foo2 is not a function  此處的foo2未被賦值，爲undefined

    function foo1(){
        console.log('foo1');
    }
    var foo2 = function (){
        console.log('foo2');
    }

1. 函數會首先被提高，而後纔是變量

foo(); //foo1  而不是TypeError 說明函數聲明先被提高，而後纔是變量提高，可是同名，因此變量的聲明被忽略了

    var foo = function (){
        console.log('foo2');
    }

    function foo(){
        console.log('foo1');
    }

    foo(); //foo2 執行賦值以後，foo函數輸出foo2

閉包

閉包是基於詞法做用域寫代碼時所產生的天然結果，閉包的建立和使用在代碼中隨處可見，咱們須要的是根據本身的意願來識別，擁抱和影響閉包的思惟環境。

當函數能夠記住並訪問所在的詞法做用域時，就產生了閉包，即便函數是在當前做用域以外執行。

function foo() {
    var a = 2;
    
    function bar() {
        console.log(a);
    }

    return bar;
}

var baz = foo();

baz() // 2  --- 閉包效果

函數baz（實際上就是bar的引用）能夠訪問到foo內部做用域，雖然是在foo做用域外部執行的。而正是因爲bar的存在，因此foo函數執行後，內部做用域沒有被銷燬，bar會使用這個內部做用域。

bar依然持有對該做用域的引用，這個引用就叫作閉包。閉包使得函數能夠繼續訪問定義時詞法做用域。不管使用何種方式對函數類型的值進行傳遞，當函數在別處別調用時均可以觀察到閉包。

閉包的一個經典問題

for(var i = 1; i <= 5 ; i++) {
        setTimeout(function timer() {
            console.log(i);
        },i * 1000);
    }

這裏會每間隔一秒，打印一個6。每次循環都會建立一個timer函數傳遞個setTimeout。timer中使用的變量i都是上層做用域中定義的變量i（閉包），當循環執行完以後，i的值爲6，因此會連續打印5個6.

若是想依次打印1到5。有如下處理方式。

1. 在定時器外建立一層做用域，使每次循環產生的timer使用的i都不同。

for(var i = 1; i <= 5 ; i++) {
        (function(j){
                    setTimeout(function timer() {
            console.log(j);
        },j * 1000);
        })(i)
    }

1. 使用塊級做用域 - let

for(let i = 1; i <= 5 ; i++) {
        setTimeout(function timer() {
            console.log(i);
        },i * 1000);
    }

塊級做用域會使每次建立定時器的做用域都不同。並且語言特性會使循環時記住上一次i的值。