JavaScript 函數表達式與函數聲明的用法及區別

前言

在 JavaScript 中創建函數有兩種方法:函數表達式和函數聲明。在本文中,將討論何時使用函數表達式與函數聲明,並解釋它們之間的區別。

函數聲明已經使用瞭很長時間,但函數表達式已經逐漸占據主導地位。函數表達式和函數聲明之間有一些關鍵區別,來看看這些差異,以及何時在代碼中使用函數表達式與函數聲明。

// 函數聲明
function funcDeclaration() {
    return "函數聲明";
}
// 函數表達式
const funcExpression = function () {
    return "函數表達式";
};

什麼是函數聲明?

函數聲明是在創建函數並為其命名的方式,開始使用 function 關鍵字聲明函數。

例如:

function customFunction() {
    // 函數邏輯
    conosle.log("Hello")
};

如上所見,函數名稱(customFunction)是在創建函數時聲明的,這種方式著這個函數可以在定義之前調用它,

如下:

customFunction();
function customFunction() {
    // 函數邏輯
    console.log("Hello");
}

函數聲明的好處

  • 它可以使代碼更具可讀性:如果有一個很長的函數,給它一個名字可以幫助跟蹤它在做什麼。
  • 函數聲明被提升:這種方式定義的函數可以在定義之前調用它,如果需要在定義之前使用該函數,這將非常有用。

什麼是函數表達式?

函數表達式是在創建函數並將其分配給變量,此方式定義的函數是匿名函數,這意味著它沒有名稱。

例如:

const customFunction = function() {
    // 函數邏輯
    conosle.log("Hello")
};

如上所述,該函數被分配給 customFunction 變量,這種方式必須先定義該函數,才能調用它。

如下的方式是錯誤的:

customFunction();
const customFunction = function() {
    // 函數邏輯
    conosle.log("Hello")
};

函數表達式的好處

  • 比函數聲明更靈活:可以創建函數表達式並將它們分配給不同的變量,這在需要在不同的地方使用相同的函數時會很有幫助。
  • 函數表達式未提升:在代碼中定義它們之前不能使用它們。如果想確保函數僅在定義後使用,這將很有幫助。

函數表達式和函數聲明之間的區別

函數表達式和函數聲明之間有幾個關鍵區別:

  • 函數聲明被提升(關於提升,可以參閱《Javascript變量函數聲明提升深刻理解》,而函數表達式則沒有。可以在定義函數聲明之前調用它,但不能使用函數表達式執行此操作。
  • 使用函數表達式,可以在定義函數後立即使用它。使用函數聲明,必須等到整個腳本被解析。
  • 函數表達式可以是匿名的,而函數聲明則不能。

函數表達式中的作用域

let語句類似,函數聲明被提升到其它代碼的頂部。函數表達式不會被提升。這允許它們從定義它們的范圍內保留局部變量的副本。

通常,可以互換使用函數聲明和函數表達式,但有時函數表達式會生成更易於理解的代碼,而不需要臨時函數名。

如何在表達式和聲明之間進行選擇

那麼,什麼時候應該使用函數表達式與函數聲明呢?

答案取決於需求,如果需要一個更靈活的函數或一個不被提升的函數,那麼函數表達式就是首選。如果需要一個更具可讀性和可理解性的函數,請使用函數聲明。

如上所見,這兩種語法是相似的,最明顯的區別是函數表達式是匿名的,而函數聲明是有名字的。當需要做一些函數表達式不能做的事情時,通常會使用函數聲明。如果不需要做任何隻能通過函數聲明才能完成的事情,那麼通常最好使用函數表達式。

當需要創建遞歸函數或需要在定義函數之前調用該函數時,就需要使用函數聲明。

作為一個經驗法則,當不需要做這些事情時,使用函數表達式來獲得更簡潔的代碼。

何時選擇函數聲明與函數表達式

在大多數情況下,很容易確定哪種定義函數的方法最適合需求。下面這些準則在大多數情況下可以快速做出決定。

在以下情況下使用函數聲明

  • 需要一個更易讀易懂的函數(比如一個長函數,或者需要在不同地方使用的函數)
  • 匿名函數不適合的需求
  • 需要創建一個遞歸函數
  • 需要在定義之前調用該函數

在以下情況下使用函數表達式

  • 需要一個更靈活的功能
  • 需要一個未提升的功能
  • 該函數隻應在定義時使用
  • 該函數是匿名的,或者不需要名稱供以後使用
  • 想控制函數何時執行,使用立即調用函數表達式 (IIFE) 等技術

到此這篇關於JavaScript 函數表達式與函數聲明的用法及區別的文章就介紹到這瞭,更多相關JS函數聲明內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: