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

netScorpion 發布于2019-08-23 12:33 / 469人閱讀

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

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

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

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

執行上下文：
所謂的執行上下文，就是JS代碼執行的環境。

Javascript中代碼的運行環境分為以下三種：

全局上下文 - 這個是默認的代碼運行環境，一旦代碼被載入，引擎最先進入的就是這個環境。

函數上下文 - 當執行一個函數時，運行函數體中的代碼。

Eval上下文 - 在Eval函數內運行的代碼。

這個和作用域有點像。
每次調用一個函數將會創建一個新的執行上下文會,被添加到作用域鏈的頂部。
作用域和執行上下文之間最大的區別是：執行上下文在運行時確定，隨時可能改變；作用域在定義時確定，永遠不會改變。

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

JS代碼在執行之前會先全局中變量提升、函數聲明。在函數中變量提升、函數聲明（this、函數參數也會提升，函數中的變量提升的范圍是這個函數的內部）

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

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

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

相當于如下這樣：

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

函數聲明：

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

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

相當于如下這樣：

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

這個就是函數聲明，在代碼執行前，會把function提到頂部。所以如果不行代碼，代碼塊里即使有錯誤也不會報出來，只有執行時才會運行代碼內部東西。

看到這里應該有個初步了解了，那么來看看下面的。加點難度，加深了解。

為什么fn中的globle拿不到呢？而fn2的globle能拿到值呢？
運用上面學習的知識來分析一波。
上面代碼在執行前，會經過變量提升、函數聲明，所以在準備執行前的代碼是這樣的：

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

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

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

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

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

GPU云服務器云服務器 js變量聲明提升 js原型鏈的繼承原型聲明執行js函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98724.html

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

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

melody_lql 2019-08-29 17:05 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

zhigoo 2019-08-02 11:48 評論0 收藏0
原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

摘要：上一章執行上下文變量提升函數聲明傳送門本次我們主要講講變量作用域和閉包變量作用域顧名思義變量起作用的范圍。則是局部變量，只能在函數中使用。閉包則能長久保存變量，又不會污染。舉例子定義外層函數，封裝被保護的局部變量。上一章 JS執行上下文、變量提升、函數聲明傳送門：https://segmentfault.com/a/11... 本次我們主要講講變量作用域和閉包變量作用域：顧名思義：...

codecraft 2019-08-02 11:50 評論0 收藏0
原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

摘要：上一章執行上下文變量提升函數聲明傳送門本次我們主要講講變量作用域和閉包變量作用域顧名思義變量起作用的范圍。則是局部變量，只能在函數中使用。閉包則能長久保存變量，又不會污染。舉例子定義外層函數，封裝被保護的局部變量。上一章 JS執行上下文、變量提升、函數聲明傳送門：https://segmentfault.com/a/11... 本次我們主要講講變量作用域和閉包變量作用域：顧名思義：...

Drinkey 2019-08-29 17:07 評論0 收藏0