一、作用域的概念

1、作用域有三種：全局作用域、函數(shù)作用域、塊級作用域。（模塊作用域）

（1）全局作用域：這時最高級別的作用域，在這定義的函數(shù)以及變量可以在代碼的所有地方被訪問。在瀏覽器的環(huán)境中，全局變量實際是window對象的屬性。例如：

var a = 123 
function foo(){}
//在全局中定義了變量a 函數(shù)foo()

（2）函數(shù)作用域（局部作用域）：在每個函數(shù)內(nèi)部聲明的變量（未使用const、let關(guān)鍵字）、function聲明的函數(shù)，這些對象具有局部作用域，它們只可以在函數(shù)內(nèi)部訪問。例如：

function foo(){
    var a;
    function add(){}
}

（3）塊級作用域：這個作用域是在ES6引入了let和const關(guān)鍵字，避免因var聲明的變量的變量提升（接下來會進(jìn)行解釋）現(xiàn)象，導(dǎo)致的讓人匪夷所思的行為。這個作用域可以簡單的理解為：{} + let/const例如：

if(...){
    let a = 6;
    const b = 6
}
while(...){
    let a = 6;
    const b =6
}
for(){
    let a = 6;
    const b =6;
}
function foo(){
    let a = 6;
    const b =6;
}

注：（1） 以上作用域所指的是全局內(nèi)、函數(shù)體內(nèi)、塊內(nèi)的域，而詞法作用域則是變量聲明的地方，注意不是調(diào)用的地方。例如：我們的寢室是一個域，則該域的詞法作用域就是這一棟寢室樓。

（2）欺騙詞法作用域：

eval:可以讓原本不屬于這里的代碼，變得好像天生被定義了在這一樣。

 function foo(a,str){
    eval(str) //相當(dāng)于var b = 2;
    console.log(a,b)
}
foo(1,'var b = 2')

whit(){} 當(dāng)修改對象中不存在的屬性時，這個屬性會被定義在全局，變?yōu)槿肿兞?，造成?shù)據(jù)泄露。

function foo(obj){
    with(obj){
        a = 2
    }
}
var o2= {
    b :1
}
foo(o2)
console.log(a) //輸出a = 2,此時的a為全局變量

2、聲明提升的概念與示例

概念：在變量聲明和函數(shù)聲明在代碼執(zhí)行前被提升，或者說移到，其包含的作用域的頂部的過程，發(fā)生在JS的編譯階段，導(dǎo)致了變量和函數(shù)可以在被聲明之前就被訪問。

console.log(a); //變量a只是聲明被提示，輸出undefined
var a = 6;


//編譯器會將代碼整理為
//var a;
//console.log(a);
//a = 6;

即使函數(shù)foo()在調(diào)用之后聲明，但由于聲明提升，他在執(zhí)行開始時，就可以使用了，因此能正常輸出。

foo();
function foo(){
    console.log('你好')
}

二、“預(yù)備與編譯”--預(yù)編譯的概念

1、預(yù)編譯發(fā)生在代碼被執(zhí)行之前，是JS引擎對代碼的預(yù)處理，保證了變量和函數(shù)在使用之前已經(jīng)被正確的設(shè)置。

2、全局預(yù)編譯：

（1）創(chuàng)建全局執(zhí)行上下文GO（Global Object）。

（2）尋找變量聲明，變量名作為GO的屬性名，值為undefined。

（3）在全局找函數(shù)聲明，函數(shù)名作為GO的屬性名，值為函數(shù)體

畫圖實例：

3、函數(shù)中的預(yù)編譯

（1）創(chuàng)建函數(shù)的執(zhí)行上下文對象AO（Activation Object）。

（2）找到形參和變量聲明，將形參和變量聲明作為AO的屬性名，值為undefined。

（3）將實參和形參統(tǒng)一

（4）在函數(shù)體內(nèi)找到函數(shù)聲明，將函數(shù)名作為AO的屬性名，值為函數(shù)體。

畫圖實例：

注： 以上的執(zhí)行上下文是被放在一個棧內(nèi)，AO對象被放在變量環(huán)境中。在執(zhí)行上下文中除了變量環(huán)境外，還有一個詞法環(huán)境，用于let 和 const 聲明的變量的存儲，這保證了它們可以遵守塊級作用域的規(guī)則，處于臨時死區(qū)，直到聲明被執(zhí)行才可被訪問。這個棧叫做調(diào)用棧。

畫圖實例：

作者：Sane
鏈接：https://juejin.cn/post/7372577541112561676
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。