iT邦幫忙

0

為了轉生而點技能,難題紀錄(一)Hoisting篇。

詳細Hoisting篇觀念可以參考JS 原力覺醒 Day06- 提升 Hoisting
這邊只是為了記錄函式拆解過程,如果有前輩覺得哪邊可以修改,請大力鞭策!!!

   /* 函式陳述式
    callName();
    function callName() {
        console.log('呼叫小明');
    }

    可執行原因如下

    __________________________________________
    _______________大部分解____________________

           
    創造階段:(為變數及函式保留記憶體空間的動作,就被稱為「提升( Hoisting )」。提升這個動作在不論是 
    全域執行環境還是函式執行環境,所有的執行環境都會進行;這個記憶體空間則稱為全域記憶體 ( Global 
    Memory ) ,或稱記憶體堆積 ( Heap )。)
    
    function callName() {
        console.log('呼叫小明');
    }

    執行階段
    callName();

     */


    /* 函式表達式
    callName();
    var callName = function () {
        console.log('呼叫小明');
    }
    
    
    出現 callName is not a function

            ↓

    console.log(callName);
    var callName = function () {
        console.log('呼叫小明');
    }
    
    把callName()變成console.log(callName),會出現undefined,
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間),
    代表callName是變數,僅被創造於記憶體,尚未於記憶體上賦予值,
    故為undefined。
    
    var callName;

    執行階段
    callName = function () {
        console.log('呼叫小明');
    }
            
    因此
    var callName = function () {
        console.log('呼叫小明');
    }
    callName();
    成功執行。 
    */


    /*
    函式陳述式及函式表達式併行結果:
    
    型1:
    function callName() {
        console.log('呼叫小明1');
    }
    var callName = function () {
        console.log('呼叫小明2');
    }
    callName();

    結果為  呼叫小明2
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間):函式會先行放入記憶體,
    變數會排在函式下一位。

    1. function callName() {
        console.log('呼叫小明1');
       }
    2.var callName
    

    執行階段:
    callName = function () {
        console.log('呼叫小明2');
    }
    callName();
    */

    /*
    型2:
    callName();
    function callName() {
        console.log('呼叫小明1');
    }
    var callName = function () {
        console.log('呼叫小明2');
    }
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間):函式會先行放入記憶體,
    變數會排在函式下一位。

    1. function callName() {
        console.log('呼叫小明1');
       }
    2.var callName
    

    執行階段:
    callName();
    callName = function () {
        console.log('呼叫小明2');
    }
    
    結果為呼叫小明1。
    */

    /*
    例子1:
    callName();
    function callName() {
        console.log(Ming);
    }
    var Ming = '小明';
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間):函式會先行放入記憶體,
    變數會排在函式下一位。

    1.function callName() {
        console.log(Ming);
      }
    2.var Ming
    

    執行階段:
    callName(); 結果為undifinted。
    Ming = '小明'
    */

    /*例子2:

    function callName() {
        console.log('小明');
    }
    callName();
    function callName() {
        console.log('杰倫');
    }
    callName();
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間):1.函式會先行放入記憶體,
    因為程式運作會先讀取1.函式,再來讀取後面進入記憶體的2.函式。

    1.function callName() {
        console.log('小明');
      }
    2.function callName() {
        console.log('杰倫');
      }
    

    執行階段:
    callName();
    callName();
    都是杰倫。
    */


    /*例子3:
    whosName(); 
    function whosName() {
        if (name) {
            name = '杰倫';
        }
    }
    var name = '小明';
    console.log(name);

    /*
    __________________________________________
    _______________大部分解____________________

    創造階段(放進記憶體空間):函式會先行放入記憶體,
    變數會排在函式下一位。

    1.function whosName() {
        if (name) {
            name = '杰倫';
        }
    }
    2.var name

    執行階段:
    whosName();
    name = '小明';
    console.log(name);
    
    whosName()       -> 因為function whosName()裡面的if (name) 之name僅被宣告
                        創造階段(2.var name),尚未被賦值,所以if為false,
                        使function whosName()無作用。

    name = '小明'    -> 代表var name被賦予值 '小明'。
    console.log(name)-> 小明。

    
    */

尚未有邦友留言

立即登入留言