JS中var聲明與function聲明兩種函數聲明方式的區別

JS中常見的兩種函數聲明(statement)方式有這兩種:

// 函數表達式(function expression) 
var h = function() {
      // h
}

// 函數聲明(function declaration) 
function h() {
      // h
}

 

先說兩者的顯著區別:

第一種聲明方式也就是var聲明方式, 函數只有在var語句聲明之后才能被調用

第二種生命方式也就是function聲明方式, 函數可以在function聲明之前被調用

這是因為,

對第一種情況, 函數表達式是在函數運行階段才賦值給變量h

對第二種情況, 函數表達式是在代碼運行階段之前, 也就是代碼解析階段才賦值給標識符h

為了證明這種說法可以看下面兩個例子:

對應第一種情況,

var h = function () {
      // h
}

console.log(h)
    
h = function () {
      // h1
}

console的結果是

ƒ h() {
  // h
}

因為賦值發生在代碼運行階段, 代碼自上而下運行console.log(h)所在位置只能獲取它之前的賦值

對應第二種情況,

function h() {
      // h
}

console.log(h)
    
function h() {
      // h1
}

console的結果是

ƒ h() {
  // h1
}

因為賦值發生在代碼解析階段, 代碼運行到console.log(h)時解析早已完成, 而解析的結果是后面那個函數h, 故會打印此結果

深入:

JS聲明函數的三種方式:

1. 函數表達式: 即上面第一種方式, 這種方法使用function操作符創建函數, 表達式可以存儲在變量或者對象屬性里. 函數表達式往往被稱為

匿名函數, 因為它沒有名字. 證明這一點你可以 console.log(h.name); 可以看到打印為空 ""

2. 函數聲明:  即上面第二種方式, 會聲明一個具名函數, 且函數能在其所在作用域的任意位置被調用, 其創建的函數為具名函數, 證明這一

點你可以 console.log(h.name); 可以看到打印為 "h". 可在后面的代碼中將此函數通過函數名賦值給變量或者對象屬性

3. Function()構造器: 不推薦這種用法, 容易出問題