在 JavaScript 中，函數不是“神奇的語言結構”，而是一種特殊的值。

我們之前使用的語法稱為函數聲明：

function sayHi() {
  alert( "Hello" );
}

還有另一種創建函數的語法，稱為函數表達式。

它看起來像這樣：

let sayHi = function() {
  alert( "Hello" );
};

在這里，函數被創建并顯式分配給變量，就像任何其他值一樣。無論函數如何定義，它都只是存儲在變量中的一個值sayHi。

這些代碼示例的含義是相同的：“創建一個函數并將其放入變量中sayHi”。

我們甚至可以使用alert以下方法打印出該值：

function sayHi() {
  alert( "Hello" );
}
alert( sayHi ); // shows the function code

請注意，最后一行不運行該函數，因為sayHi. 在某些編程語言中，只要提及函數名稱就會導致其執行，但 JavaScript 并非如此。

在 JavaScript 中，函數是一個值，所以我們可以將它作為一個值來處理。上面的代碼顯示了它的字符串表示，這是源代碼。

當然，一個函數是一個特殊的值，我們可以像sayHi().

但它仍然是一個價值。所以我們可以像處理其他類型的值一樣使用它。

我們可以將一個函數復制到另一個變量：

function sayHi() {   // (1) create
  alert( "Hello" );
}
let func = sayHi;    // (2) copy
func(); // Hello     // (3) run the copy (it works)!
sayHi(); // Hello    //     this still works too (why wouldn't it)

以下是上面發生的詳細情況：

函數聲明(1)創建函數并將其放入名為 的變量中sayHi。

Line 將其(2)復制到變量中func。請再次注意：后面沒有括號sayHi。如果有，那么func = sayHi()會寫 調用的結果 sayHi()為func，不函數 sayHi本身。

現在，該函數可以同時作為sayHi()和調用func()。

請注意，我們也可以sayHi在第一行中使用函數表達式來聲明：

let sayHi = function() {
  alert( "Hello" );
};
let func = sayHi;
// ...

回調函數

讓我們看一下將函數作為值傳遞和使用函數表達式的更多示例。

我們將編寫一個ask(question, yes, no)帶有三個參數的函數：

question

問題的文本

yes

答案為“是”時運行的函數

no

如果答案為“否”則運行的函數

該函數應詢問question和 ，具體取決于用戶的回答，調用yes()或no()：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
function showOk() {
  alert( "You agreed." );
}
function showCancel() {
  alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

在實踐中，這些功能非常有用?，F實生活ask和上面的例子之間的主要區別在于，現實生活中的函數使用比簡單的confirm. 在瀏覽器中，這樣的功能通常會繪制一個漂亮的問題窗口。但那是另一個故事了。

參數showOk和showCancelofask被稱為回調函數或只是callbacks。

這個想法是我們傳遞一個函數并期望它在必要時被“回調”。在我們的例子中，showOk成為“是”回答和“否”回答的回調showCancel。

我們可以使用函數表達式將相同的函數寫得更短：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

函數表達式與函數聲明

讓我們制定函數聲明和表達式之間的主要區別。

語法：如何在代碼中區分它們。

函數聲明：在主代碼流中聲明為單獨語句的函數。

// Function Declaration
function sum(a, b) {
  return a + b;
}

函數表達式：在表達式或另一個語法結構中創建的函數。這里，函數是在“賦值表達式”的右側創建的=：

// Function Expression
let sum = function(a, b) {
  return a + b;
};

更細微的區別是JavaScript 引擎何時創建函數。

函數表達式在執行到達時創建，并且僅從那一刻起可用。

一旦執行流程傳遞到賦值的右側let sum = function…——我們開始，函數就被創建并且可以從現在開始使用(賦值、調用等)。

函數聲明是不同的。

函數聲明可以在定義之前被調用。

例如，全局函數聲明在整個腳本中都是可見的，無論它在哪里。

這是由于內部算法。當 JavaScript 準備運行腳本時，它首先在其中查找全局函數聲明并創建函數。我們可以將其視為“初始化階段”。

并且在處理完所有函數聲明之后，執行代碼。所以它可以訪問這些功能。

例如，這有效：

sayHi("John"); // Hello, John
function sayHi(name) {
  alert( `Hello, ${name}` );
}

函數聲明sayHi是在 JavaScript 準備啟動腳本時創建的，并且在腳本中的任何地方都可見。

...如果它是一個函數表達式，那么它就行不通了：

sayHi("John"); // error!
let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};

函數表達式在執行到達時創建。那只會發生在行中(*)。太晚了。

函數聲明的另一個特點是它們的塊作用域。

在嚴格模式下，當函數聲明在代碼塊內時，它在該塊內的任何地方都是可見的。但不是在它之外。

例如，假設我們需要welcome()根據age運行時獲得的變量聲明一個函數。然后我們計劃稍后使用它。

如果我們使用函數聲明，它將無法按預期工作：

let age = prompt("What is your age?", 18);
// conditionally declare a function
if (age < 18) {
  function welcome() {
    alert("Hello!");
  }
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// ...use it later
welcome(); // Error: welcome is not defined

這是因為函數聲明僅在它所在的代碼塊內可見。

這是另一個例子：

let age = 16; // take 16 as an example
if (age < 18) {
  welcome();               // \   (runs)
                           //  |
  function welcome() {     //  |
    alert("Hello!");       //  |  Function Declaration is available
  }                        //  |  everywhere in the block where it's declared
                           //  |
  welcome();               // /   (runs)
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// Here we're out of curly braces,
// so we can not see Function Declarations made inside of them.
welcome(); // Error: welcome is not defined

我們可以做些什么來使welcome外部可見if?

正確的方法是使用函數表達式并分配welcome給在外部聲明if并具有適當可見性的變量。

此代碼按預期工作：

let age = prompt("What is your age?", 18);
let welcome;
if (age < 18) {
  welcome = function() {
    alert("Hello!");
  };
} else {
  welcome = function() {
    alert("Greetings!");
  };
}
welcome(); // ok now

或者我們可以使用問號運算符進一步簡化它?：

let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
  function() { alert("Hello!"); } :
  function() { alert("Greetings!"); };
welcome(); // ok now

以上就是動力節點小編介紹的"函數表達式"，希望對大家有幫助，想了解更多可查看Java在線學習。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。