卡卡網(wǎng)

函數(shù)聲明和函數(shù)表達(dá)式是使用function關(guān)鍵字創(chuàng)建函數(shù)的兩種方法，在本文中，我將介紹這兩種方法的差異，以及使用它們時(shí)的注意事項(xiàng)。

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

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

讓我們舉一個(gè)例子來(lái)說(shuō)明差異——我們創(chuàng)建一個(gè)對(duì)數(shù)字求和的函數(shù)的 2 個(gè)版本：

function sumA(a, b) {
  return a + b;
}
(function sumB(a, b) {
  return a + b;
});
sumA(1, 2); // ???
sumB(1, 2); // ???

一種情況，你可以像往常一樣定義函數(shù)（sumA函數(shù)）。另一種情況，函數(shù)被放置在一對(duì)括號(hào)中（sumB函數(shù)）。

如果你調(diào)用sumA(1, 2)和sumB(1, 2)會(huì)發(fā)生什么？

正如預(yù)期的那樣，sumA(1, 2)只需返回1和2數(shù)字的總和： 3。而，調(diào)用sumB(1, 2)會(huì)引發(fā)錯(cuò)誤Uncaught ReferenceError: sumB is not defined。

解釋是sumA使用函數(shù)聲明創(chuàng)建的，它在當(dāng)前范圍內(nèi)創(chuàng)建一個(gè)函數(shù)變量（與函數(shù)名稱相同）。但是sumB是使用函數(shù)表達(dá)式創(chuàng)建的（它被包裹在括號(hào)中），它不會(huì)在當(dāng)前范圍內(nèi)創(chuàng)建函數(shù)變量。

如果要訪問(wèn)使用函數(shù)表達(dá)式創(chuàng)建的函數(shù)，可以將函數(shù)對(duì)象保存到變量中：

const sum = (function sumB(a, b) {
  return a + b;
});
sum(1, 2); // => 3

如何區(qū)分函數(shù)聲明和函數(shù)表達(dá)式

下面是關(guān)于如何區(qū)分函數(shù)聲明和函數(shù)表達(dá)式的簡(jiǎn)單方法：

如果語(yǔ)句以function關(guān)鍵字開(kāi)頭，則為函數(shù)聲明，否則為函數(shù)表達(dá)式。

// 函數(shù)聲明: 用 `function` 關(guān)鍵詞開(kāi)始
function sumA(a, b) {
return a + b;
}
// 函數(shù)表達(dá)式: 不以 `function` 關(guān)鍵詞開(kāi)始
const mySum = (function sumB(a, b) {
return a + b;
});
// 函數(shù)表達(dá)式: 不以 `function` 關(guān)鍵詞開(kāi)始
[1, 2, 3].reduce(function sum3(acc, number) { 
return acc + number 
});

從更高的角度來(lái)看，函數(shù)聲明對(duì)于創(chuàng)建獨(dú)立函數(shù)很有用，但函數(shù)表達(dá)式作為回調(diào)很好。

現(xiàn)在，讓我們更深入地研究函數(shù)聲明和函數(shù)表達(dá)式的使用。

2、函數(shù)聲明

在前面的示例中已經(jīng)看到的，sumA是一個(gè)函數(shù)聲明：

function sumA(a, b) {
  return a + b;
}
sumA(4, 5); // => 9

當(dāng)語(yǔ)句包含關(guān)鍵字后跟函數(shù)名、一對(duì)帶參數(shù)的括號(hào)以及用一對(duì)花括號(hào)括起來(lái)的函數(shù)體時(shí)，就是函數(shù)聲明。function(param1, param2, paramN){ }

函數(shù)聲明創(chuàng)建了一個(gè)函數(shù)變量——一個(gè)與函數(shù)名同名的變量（例如前面例子的sumA）。函數(shù)變量可以在當(dāng)前范圍內(nèi)（函數(shù)聲明之前和之后）訪問(wèn)，甚至可以在函數(shù)的范圍內(nèi)訪問(wèn)。

函數(shù)變量通常用于調(diào)用函數(shù)或?qū)⒑瘮?shù)對(duì)象傳遞給其他函數(shù)（傳遞給高階函數(shù)）。

例如，我們編寫(xiě)一個(gè)函數(shù)sumArray(array)，對(duì)數(shù)組的項(xiàng)進(jìn)行遞歸求和（該數(shù)組可以包含數(shù)字或其他數(shù)組）：

sumArray([10, [1, [5]]]); // => 16
function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}
sumArray([1, [4, 6]]); // => 11

function sumArray(array) { ... }是一個(gè)函數(shù)聲明。

包含函數(shù)對(duì)象的函數(shù)變量sumArray在當(dāng)前范圍內(nèi)可用：在函數(shù)聲明之前sumArray([10, [1, [5]]])和之后sumArray([1, [4, 6]])，以及在函數(shù)本身的范圍內(nèi)sumArray(item)（允許遞歸調(diào)用）。

由于提升，函數(shù)變量在函數(shù)聲明之前可用。

函數(shù)聲明的注意事項(xiàng)

函數(shù)聲明語(yǔ)法的作用是創(chuàng)建獨(dú)立函數(shù)。函數(shù)聲明應(yīng)在全局范圍內(nèi)或直接在其他函數(shù)的范圍內(nèi)：

// 好!
function myFunc1(param1, param2) {
  return param1 + param2;
}
function bigFunction(param) {
  // 好!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }
  const result = myFunc2(1, 3);
  return result + param;
}

出于同樣的原因，不建議在條件 (if) 和循環(huán) ( while, for)中使用函數(shù)聲明：

// 不好!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}
myFunction(2, 3);

使用函數(shù)表達(dá)式更好地執(zhí)行有條件地創(chuàng)建函數(shù)。

3、函數(shù)表達(dá)式

當(dāng)function關(guān)鍵字在表達(dá)式內(nèi)創(chuàng)建函數(shù)（有或沒(méi)有名稱）時(shí)，就是函數(shù)表達(dá)式。

以下是使用表達(dá)式創(chuàng)建的函數(shù)的示例：

const sum = (function sumB(a, b) {
  return a + b;
});
const myObject = {
  myMethod: function() {
    return 42;
  }
};
const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

在函數(shù)表達(dá)式中創(chuàng)建了兩種函數(shù)：

• 如果表達(dá)式中的函數(shù)沒(méi)有名稱，例如function() { return 42 }，那么這是一個(gè)匿名函數(shù)表達(dá)式。
• 如果函數(shù)有名字，例如在前面的例子中的sumB和callback，那么這是一個(gè)命名函數(shù)表達(dá)式。

函數(shù)表達(dá)式的注意事項(xiàng)

函數(shù)表達(dá)式非常適合作為條件創(chuàng)建的回調(diào)或函數(shù)：

// 有條件地創(chuàng)建函數(shù)
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}
// 作為回調(diào)使用函數(shù)
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

如果你創(chuàng)建了命名函數(shù)表達(dá)式，請(qǐng)注意函數(shù)變量?jī)H在創(chuàng)建的函數(shù)范圍內(nèi)可用：

const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});
console.log(callback); // ReferenceError: callback is not defined

callback是一個(gè)命名函數(shù)表達(dá)式，因此callback函數(shù)變量?jī)H在callback()函數(shù)范圍內(nèi)可用，而在外部不可用。

但是，如果將函數(shù)對(duì)象存儲(chǔ)到常規(guī)變量中，則可以在函數(shù)范圍內(nèi)外從該變量訪問(wèn)函數(shù)對(duì)象：

const callback = function(number) {
  console.log(callback); // logs function() { ... }
};
const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }

4、總結(jié)

根據(jù)你使用function關(guān)鍵字創(chuàng)建函數(shù)的方式，你可以通過(guò)兩種方式創(chuàng)建函數(shù)：函數(shù)聲明和函數(shù)表達(dá)式。

當(dāng)你使用function關(guān)鍵字開(kāi)始語(yǔ)句時(shí)是函數(shù)聲明，函數(shù)聲明對(duì)于創(chuàng)建獨(dú)立的通用函數(shù)很有用。

如果語(yǔ)句不以function關(guān)鍵字開(kāi)頭，那么這是一個(gè)函數(shù)表達(dá)式，使用函數(shù)表達(dá)式創(chuàng)建的函數(shù)對(duì)于按條件創(chuàng)建回調(diào)或函數(shù)很有用。

相關(guān)文章

• [實(shí)例] JavaScript 常用函數(shù)調(diào)用方式：函數(shù)調(diào)用 vs 方法調(diào)用
• JavaScript函數(shù)調(diào)用的三種方式與this的使用【示例】
• 【示例】講解JavaScript IIFE 與函數(shù)調(diào)用
• 【示例】分析箭頭函數(shù)中的this值
• 新手指南：理解JS中的箭頭函數(shù)和常規(guī)函數(shù)
• 不能使用箭頭函數(shù)的6種情況
• [實(shí)例]演示區(qū)別箭頭函數(shù)和常規(guī)函數(shù)的this值
• 箭頭函數(shù)=>不能換行？大括號(hào){}這種情況下可以不要
• 實(shí)例演示無(wú)參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法
• 實(shí)例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法

標(biāo)簽: 函數(shù)表達(dá)式  函數(shù)聲明