JS中var聲明與function聲明以及構造函數聲明方式的區別

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

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

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

// 構造函數(function constructor)
function H() {
　　　 // H　
}

 

先說三者的顯著區別:

第一種聲明方式也就是var聲明方式，函數表達式，又叫做函數字面量(Function Literals)、函數直接量(Function direct quantity)， 函數只有在var語句聲明之后才能被調用

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

第三種聲明方式也就是構造函數聲明方式，函數可以在function聲明之前被調用，不同於函數聲明的是構造函數的函數名首字母要大寫

因為在函數預編譯過程中，會將函數聲明整體提升，而對於var變量只會把var h進行提升，然后再在代碼運行階段進行賦值

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

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

對第三種情況，構造函數也是在代碼運行階段之前，也就是代碼解析階段才賦值給標識符H

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

對應第一種情況，

var h = function () {
      // h
}

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

console的結果是

undefined

ƒunction () {
  　　// h
}

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

對應第二種情況，第三種情況，

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

function h() {
      // h
}

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

function h() {  
　　　 // h1 
}

console的結果是

ƒunction h() {
  　　 // h1
}

ƒunction h() {
  　　 // h1
}

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

深入：

JS聲明函數的三種方式：

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

匿名函數，因為它沒有名字。證明這一點你可以 console.log(h.name)； 可以看到打印為空 ""，而h只是對函數的引用，不是函數名。

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

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

3. 構造函數function Fun(){}：不推薦這種用法，容易出問題，通常用於原型鏈中

 

深入了解函數字面量和函數直接量：

https://blog.csdn.net/qq_25178609/article/details/51669870　　https://blog.csdn.net/superhoy/article/details/52946157