在 JavaScript 中，函數(shù)不是“神奇的語(yǔ)言結(jié)構(gòu)”，而是一種特殊的值。

我們之前使用的語(yǔ)法稱(chēng)為函數(shù)聲明：

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

還有另一種創(chuàng)建函數(shù)的語(yǔ)法，稱(chēng)為函數(shù)表達(dá)式。

它看起來(lái)像這樣：

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

在這里，函數(shù)被創(chuàng)建并顯式分配給變量，就像任何其他值一樣。無(wú)論函數(shù)如何定義，它都只是存儲(chǔ)在變量中的一個(gè)值sayHi。

這些代碼示例的含義是相同的：“創(chuàng)建一個(gè)函數(shù)并將其放入變量中sayHi”。

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

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

請(qǐng)注意，最后一行不運(yùn)行該函數(shù)，因?yàn)閟ayHi. 在某些編程語(yǔ)言中，只要提及函數(shù)名稱(chēng)就會(huì)導(dǎo)致其執(zhí)行，但 JavaScript 并非如此。

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

當(dāng)然，一個(gè)函數(shù)是一個(gè)特殊的值，我們可以像sayHi().

但它仍然是一個(gè)價(jià)值。所以我們可以像處理其他類(lèi)型的值一樣使用它。

我們可以將一個(gè)函數(shù)復(fù)制到另一個(gè)變量：

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)

以下是上面發(fā)生的詳細(xì)情況：

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

Line 將其(2)復(fù)制到變量中func。請(qǐng)?jiān)俅巫⒁猓汉竺鏇](méi)有括號(hào)sayHi。如果有，那么func = sayHi()會(huì)寫(xiě) 調(diào)用的結(jié)果 sayHi()為func，不函數(shù) sayHi本身。

現(xiàn)在，該函數(shù)可以同時(shí)作為sayHi()和調(diào)用func()。

請(qǐng)注意，我們也可以sayHi在第一行中使用函數(shù)表達(dá)式來(lái)聲明：

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

回調(diào)函數(shù)

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

我們將編寫(xiě)一個(gè)ask(question, yes, no)帶有三個(gè)參數(shù)的函數(shù)：

question

問(wèn)題的文本

yes

答案為“是”時(shí)運(yùn)行的函數(shù)

no

如果答案為“否”則運(yùn)行的函數(shù)

該函數(shù)應(yīng)詢問(wèn)question和 ，具體取決于用戶的回答，調(diào)用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);

在實(shí)踐中，這些功能非常有用。現(xiàn)實(shí)生活ask和上面的例子之間的主要區(qū)別在于，現(xiàn)實(shí)生活中的函數(shù)使用比簡(jiǎn)單的confirm. 在瀏覽器中，這樣的功能通常會(huì)繪制一個(gè)漂亮的問(wèn)題窗口。但那是另一個(gè)故事了。

參數(shù)showOk和showCancelofask被稱(chēng)為回調(diào)函數(shù)或只是callbacks。

這個(gè)想法是我們傳遞一個(gè)函數(shù)并期望它在必要時(shí)被“回調(diào)”。在我們的例子中，showOk成為“是”回答和“否”回答的回調(diào)showCancel。

我們可以使用函數(shù)表達(dá)式將相同的函數(shù)寫(xiě)得更短：

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."); }
);

函數(shù)表達(dá)式與函數(shù)聲明

讓我們制定函數(shù)聲明和表達(dá)式之間的主要區(qū)別。

語(yǔ)法：如何在代碼中區(qū)分它們。

函數(shù)聲明：在主代碼流中聲明為單獨(dú)語(yǔ)句的函數(shù)。

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

函數(shù)表達(dá)式：在表達(dá)式或另一個(gè)語(yǔ)法結(jié)構(gòu)中創(chuàng)建的函數(shù)。這里，函數(shù)是在“賦值表達(dá)式”的右側(cè)創(chuàng)建的=：

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

更細(xì)微的區(qū)別是JavaScript 引擎何時(shí)創(chuàng)建函數(shù)。

函數(shù)表達(dá)式在執(zhí)行到達(dá)時(shí)創(chuàng)建，并且僅從那一刻起可用。

一旦執(zhí)行流程傳遞到賦值的右側(cè)let sum = function…——我們開(kāi)始，函數(shù)就被創(chuàng)建并且可以從現(xiàn)在開(kāi)始使用(賦值、調(diào)用等)。

函數(shù)聲明是不同的。

函數(shù)聲明可以在定義之前被調(diào)用。

例如，全局函數(shù)聲明在整個(gè)腳本中都是可見(jiàn)的，無(wú)論它在哪里。

這是由于內(nèi)部算法。當(dāng) JavaScript 準(zhǔn)備運(yùn)行腳本時(shí)，它首先在其中查找全局函數(shù)聲明并創(chuàng)建函數(shù)。我們可以將其視為“初始化階段”。

并且在處理完所有函數(shù)聲明之后，執(zhí)行代碼。所以它可以訪問(wèn)這些功能。

例如，這有效：

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

函數(shù)聲明sayHi是在 JavaScript 準(zhǔn)備啟動(dòng)腳本時(shí)創(chuàng)建的，并且在腳本中的任何地方都可見(jiàn)。

...如果它是一個(gè)函數(shù)表達(dá)式，那么它就行不通了：

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

函數(shù)表達(dá)式在執(zhí)行到達(dá)時(shí)創(chuàng)建。那只會(huì)發(fā)生在行中(*)。太晚了。

函數(shù)聲明的另一個(gè)特點(diǎn)是它們的塊作用域。

在嚴(yán)格模式下，當(dāng)函數(shù)聲明在代碼塊內(nèi)時(shí)，它在該塊內(nèi)的任何地方都是可見(jiàn)的。但不是在它之外。

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

如果我們使用函數(shù)聲明，它將無(wú)法按預(yù)期工作：

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

這是因?yàn)楹瘮?shù)聲明僅在它所在的代碼塊內(nèi)可見(jiàn)。

這是另一個(gè)例子：

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

我們可以做些什么來(lái)使welcome外部可見(jiàn)if?

正確的方法是使用函數(shù)表達(dá)式并分配welcome給在外部聲明if并具有適當(dāng)可見(jiàn)性的變量。

此代碼按預(yù)期工作：

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

或者我們可以使用問(wèn)號(hào)運(yùn)算符進(jìn)一步簡(jiǎn)化它?：

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

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"函數(shù)表達(dá)式"，希望對(duì)大家有幫助，想了解更多可查看Java在線學(xué)習(xí)。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門(mén)到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。