JavaScript--淺談函數表達式

定義函數的方式:

函數聲明:

sayHi(); //不會報錯，在執行代碼以前會先讀取函數聲明,也就是 函數聲明提高

function sayHi(){

　　alert('Hi')

}

經過提高實際上是這樣的:

//函數聲明提高到頂部

function sayHi(){

　　alert('Hi')

}

sayHi(); //不會報錯

 

函數表達式:

sayHi(); // 報錯  

var sayHi = function(){

　　alert('Hi')

}

函數表達式實際上是建立一個匿名函數而後賦值給變量,經過提高應該是這樣的:

//函數聲明和變量聲明都被提高到做用域頂部，函數優先

functionsayHi(){

　　alert('Hi')

}

//變量聲明被提高到頂部

var sayHi;

sayHi(); // 報錯  

//變量賦值被留在原地

sayHi = function(){

　　alert('Hi')

}

 

由於函數聲明的提高行爲，致使了咱們在舊版本的瀏覽器等執行環境上運行同一段代碼會出現不一樣的結果。(由於不一樣的瀏覽器的提高規則不一樣，有的瀏覽器不會提高if內部的函數聲明)

var condition = true

if(condition){
function sayHi(){
    alert("Hi!");
    }
} else {
    function sayHi(){
        alert("Yo!");
    } 
}

sayHi()

View Code

這裏是chrome等現代瀏覽器的執行結果，並不會提高if內部的函數聲明

這裏是ie7的執行結果，很明顯，if內部的函數聲明所有被提高了，提高了2次，第二次的提高將第一次的提高覆蓋了，因此不管怎樣都是定義函數爲 alert('Yo')

 

 

 

而函數表達式的提高行爲與函數聲明的提高行爲不一致，從而建議使用函數表達式來定義函數，而不是函數聲明。(在舊版本瀏覽器中，如今的新版瀏覽器基本都修復了這個問題，只有在ie7等遠古瀏覽器還遺留這些問題)

 

 1 var sayHi;
 2 
 3 var condition = true;
 4 if(condition){
 5  sayHi = function(){
 6     alert('Hi')
 7  }
 8 }
 9 else{
10  sayHi = function(){
11     alert('Yo')
12  }
13 }
14 
15 sayHi()

View Code

 不管是chrome仍是ie7均可以很好的獲得咱們的預期效果