原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明

melody_lql 發(fā)布于2019-08-29 17:05 / 906人閱讀

摘要：代碼在執(zhí)行之前會先全局中變量提升函數(shù)聲明。函數(shù)的執(zhí)行上下文，也就是在這個(gè)函數(shù)范圍內(nèi)找到函數(shù)執(zhí)行上下文中函數(shù)范圍內(nèi)，所有用聲明的變量。函數(shù)執(zhí)行時(shí)，按照執(zhí)行位置查找變量作用域只會向上查找。下一回變量作用域與閉包

上一章：JS的數(shù)據(jù)類型 傳送門：https://segmentfault.com/a/11...

好！話不多少，我們就開始吧。對變量提升和函數(shù)聲明的理解，能讓你更清楚容易的理解，為什么你的程序報(bào)錯(cuò)了~哈哈哈

我們前端的代碼一般就三個(gè)部分組成html + css +js,一般呢我們的JS又會放在最后執(zhí)行。

執(zhí)行上下文：
所謂的執(zhí)行上下文，就是JS代碼執(zhí)行的環(huán)境。

Javascript中代碼的運(yùn)行環(huán)境分為以下三種：

全局上下文 - 這個(gè)是默認(rèn)的代碼運(yùn)行環(huán)境，一旦代碼被載入，引擎最先進(jìn)入的就是這個(gè)環(huán)境。

函數(shù)上下文 - 當(dāng)執(zhí)行一個(gè)函數(shù)時(shí)，運(yùn)行函數(shù)體中的代碼。

Eval上下文 - 在Eval函數(shù)內(nèi)運(yùn)行的代碼。

這個(gè)和作用域有點(diǎn)像。
每次調(diào)用一個(gè)函數(shù)將會創(chuàng)建一個(gè)新的執(zhí)行上下文會,被添加到作用域鏈的頂部。
作用域和執(zhí)行上下文之間最大的區(qū)別是：執(zhí)行上下文在運(yùn)行時(shí)確定，隨時(shí)可能改變；作用域在定義時(shí)確定，永遠(yuǎn)不會改變。

其實(shí)上面那些看看就好，直接看代碼吧。

JS代碼在執(zhí)行之前會先全局中變量提升、函數(shù)聲明。在函數(shù)中變量提升、函數(shù)聲明（this、函數(shù)參數(shù)也會提升，函數(shù)中的變量提升的范圍是這個(gè)函數(shù)的內(nèi)部）

變量提升：變量賦值的過程：聲明---初始化---賦值
舉例子：函數(shù)內(nèi)部的變量提升（全局的變量提升也是同理）

    function fn(){
        console.log(x);//undefined
        var x = 1;
        console.log(x);//1
    }
    fn();

這里我們從針對變量x來解說：
1.在執(zhí)行fn時(shí)，為fn創(chuàng)建一個(gè)執(zhí)行環(huán)境。（fn函數(shù)的執(zhí)行上下文，也就是在fn這個(gè)函數(shù)范圍內(nèi)）
2.找到fn函數(shù)執(zhí)行上下文中（fn函數(shù)范圍內(nèi)），所有用var聲明的變量。
3.將這些變量初始化為undefined。
4.開始執(zhí)行代碼。
5.把1賦值給變量x。

相當(dāng)于如下這樣：

 function fn(){
        //把用var聲明的變量,提升到頂部，并初始化為undefined
        var x =undefined;
        
        //開始執(zhí)行代碼。
        console.log(x);//undefined
        //把1賦值給變量x。
        var x = 1;
        console.log(x);//1
    }
    fn();

函數(shù)聲明：

    cat();//123
    function cat(){
        console.log(123);
    }
    cat();//123

1.找到所有用function聲明的變量，并在環(huán)境中創(chuàng)建這些變量。
2.將這些變量初始化并賦值為function(){xxx}
3.在環(huán)境中從上往下開始執(zhí)行代碼。

相當(dāng)于如下這樣：

    //1.找到所有用function聲明的變量，并在環(huán)境中創(chuàng)建這些變量。
    //2.將這些變量初始化并賦值為function(){xxx}
    var cat = function (){
        console.log(123);
    }
    //3.在環(huán)境中從上往下開始執(zhí)行代碼。
    cat();//123
    cat();//123

這個(gè)就是函數(shù)聲明，在代碼執(zhí)行前，會把function提到頂部。所以如果不行代碼，代碼塊里即使有錯(cuò)誤也不會報(bào)出來，只有執(zhí)行時(shí)才會運(yùn)行代碼內(nèi)部東西。

看到這里應(yīng)該有個(gè)初步了解了，那么來看看下面的。加點(diǎn)難度，加深了解。

為什么fn中的globle拿不到呢？而fn2的globle能拿到值呢？
運(yùn)用上面學(xué)習(xí)的知識來分析一波。
上面代碼在執(zhí)行前，會經(jīng)過變量提升、函數(shù)聲明，所以在準(zhǔn)備執(zhí)行前的代碼是這樣的：

    //函數(shù)聲明會在最最頂端
    var fn = function (){
        console.log(g);
    }
    var fn2 = function (){
        console.log(g);
    }
    //執(zhí)行函數(shù)和變量按照相對位置排列
    //執(zhí)行的相對位置不能變，這3個(gè)是在變量g之前執(zhí)行的就要一直在g之前執(zhí)行
    fn2();
    fn();
    fn();

    var g = undefined;
    console.log(g);//undefined
    var g = "global";
    console.log(g);//global

    //執(zhí)行的相對位置不能變，這3個(gè)是在變量g之后執(zhí)行的就要一直在g之后執(zhí)行
    fn2();
    fn2();
    fn();

這里我們可以總結(jié)出一點(diǎn)規(guī)律：
1.函數(shù)聲明會在最最頂端
2.變量提升，只是在自己的范圍內(nèi)提升
3.執(zhí)行的相對位置不能變和變量按照執(zhí)行上下文之前的相對位置排列。
4.函數(shù)執(zhí)行時(shí)，按照執(zhí)行位置查找變量作用域只會向上查找。

下一回：變量作用域與閉包