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

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

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

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

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

我們前端的代碼一般就三個(gè)部分組成html + css +js,一般呢我們的JS又會(huì)放在最后執(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ù)將會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文會(huì),被添加到作用域鏈的頂部。
作用域和執(zhí)行上下文之間最大的區(qū)別是：執(zhí)行上下文在運(yùn)行時(shí)確定，隨時(shí)可能改變；作用域在定義時(shí)確定，永遠(yuǎn)不會(huì)改變。

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

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

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

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

這里我們從針對(duì)變量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í)行前，會(huì)把function提到頂部。所以如果不行代碼，代碼塊里即使有錯(cuò)誤也不會(huì)報(bào)出來，只有執(zhí)行時(shí)才會(huì)運(yùn)行代碼內(nèi)部東西。

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114091.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

melody_lql

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

java單詞集

閱讀 3666·2021-10-12 10:11
如何遠(yuǎn)程連接虛擬主機(jī)-怎么才能用遠(yuǎn)程桌面控制連接到虛擬主機(jī)上？

閱讀 1029·2021-09-22 15:42
瞅瞅Facebook是怎么保證CSS代碼質(zhì)量的

閱讀 3481·2019-08-30 13:06
原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明

閱讀 917·2019-08-29 17:05
在html<title></title>標(biāo)簽添加圖標(biāo)，網(wǎng)頁(yè)title左邊顯示

閱讀 1663·2019-08-29 12:21
WFeB全球免費(fèi)圖書館 World Free eBook

閱讀 2391·2019-08-29 11:31
敏捷項(xiàng)目的不確定性管理

閱讀 1149·2019-08-23 18:37
vue配置font-awesome5

閱讀 1270·2019-08-23 14:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章