函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別

浠ラ箍發(fā)布于2019-08-22 15:50 / 3026人閱讀

摘要：，在這里的將所有的函數(shù)聲明進(jìn)行了提升，從而由替代了函數(shù)表達(dá)式的在順著條件判斷進(jìn)行了定義，執(zhí)行為的情況，進(jìn)行賦值解析。

函數(shù)聲明（funDeclaration）

無論在哪兒定義函數(shù),只要是外層函數(shù)并且滿足不被包裹，就都可以進(jìn)行全局范圍的調(diào)用

function foo() { }

在函數(shù)體內(nèi)部的函數(shù)聲明無法提升到全局，只能提升到函數(shù)體內(nèi)頂部(塊級(jí)作用域空間)

function test() {
    console.log(1);

    function test2() {
      console.log(2);
    }

  }
  test();  // 1
  test2(); // Uncaught ReferenceError: test2 is not defined

函數(shù)體內(nèi)部執(zhí)行：

function test() {
   
    test2();
    function test2() {
      console.log(2);
    }
  }
  test(); // 2

在外部要想訪問函數(shù)內(nèi)部申明的函數(shù)，需要先return出來:

function test() {
    console.log(1);

    function test2() {
      console.log(2);
    }
    return {
      test2:test2
    }
  }
  test().test2(); // 2

函數(shù)表達(dá)式（funExpression）

函數(shù)表達(dá)式需要等到表達(dá)式賦值完成才可以

換言之使用var來聲明函數(shù)，就會(huì)涉及到變量的聲明提升，先拿出變量名定義為undefined，再隨著邏輯順序進(jìn)行賦值先定義，后使用

var foo = function () { }

demo1

    Toast()    // hello world

    showToast(); // shwoToast is not a function

    var showToast = function () {
      console.log("123")
    }
    function Toast() {
      console.log("hello world") 
    }

在這里只需要把showToast 提前就好了

demo2 主流瀏覽器解析，ie11+

 var sayHello;
    console.log(typeof (sayHey));//=>undefined   
    console.log(typeof (sayHo));//=>undefined
    if (true) {
      function sayHey() {
        console.log("sayHey");
      }
      sayHello = function sayHo() {
        console.log("sayHello");
      }
    } else {
      function sayHey() {
        console.log("sayHey2");
      }
      sayHello = function sayHo() {
        console.log("sayHello2");
      }
    }
    sayHey();// => sayHey   
    sayHello();// => sayHello

在花括號(hào)里面聲明的函數(shù)在進(jìn)行預(yù)解析時(shí)只會(huì)提升函數(shù)名，不會(huì)提升函數(shù)體，所以不管if條件是否為真，函數(shù)體都不會(huì)提升，永遠(yuǎn)是undefined,接下來隨著if條件判斷進(jìn)行解析賦值，當(dāng)然是走ture方法。

ie9，ie10

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

在這里的ie將所有的函數(shù)聲明進(jìn)行了提升，從而由sayHey2替代了sayHey,函數(shù)表達(dá)式的在順著條件判斷進(jìn)行了定義，執(zhí)行為true的情況，進(jìn)行賦值解析。

ie8

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHello));//=>function
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

ie8在這里處理的比較奇葩，正常的函數(shù)申明提升，但是卻也將條件判斷為假的情況進(jìn)行了提升，我們看到typeof (sayHello)=>function

結(jié)論

由于函數(shù)聲明提升的差異，想要在條件判斷中定義不同的函數(shù)方法，應(yīng)該采用定義函數(shù)表達(dá)式的方法，這樣就在各個(gè)瀏覽器中拿到相同的函數(shù)方法，得到相同的結(jié)果。

 var sayHello;
    console.log(typeof (sayHey));//=>undefined    ie8以下解析為function
    console.log(typeof (sayHo));//=>undefined
    if (true) {
      var sayHey =function sayHey() {
        console.log("sayHey");
      }
     
    } else {
      var sayHey =function sayHey() {
        console.log("sayHey2");
      }
     
    }
    sayHey();// => sayHey