JavaScript 函數(shù)定義

函數(shù)允許您定義一個代碼塊，給它命名，然后根據(jù)需要反復執(zhí)行。

可以使用function關鍵字定義函數(shù)，也可以使用()運算符執(zhí)行函數(shù)。

函數(shù)聲明

在本教程的前面，您了解了使用以下語法聲明函數(shù)：

function nameOfFunction(parameters) {
  // 要執(zhí)行的語句
}

聲明的函數(shù)不會立即執(zhí)行。聲明的函數(shù)只是對函數(shù)命名，并指定函數(shù)被調(diào)用時的操作。

function greet() {
   document.write("Hello, World!");
}

在上面的示例中，我們已經(jīng)聲明（定義）了一個名為的函數(shù)greet，該函數(shù)輸出一條消息“ Hello，World！”?？梢允褂?)運算符調(diào)用此功能，例如greet()。

函數(shù)表達式

JavaScript允許我們將函數(shù)分配給變量，然后將該變量用作函數(shù)。它稱為函數(shù)表達式。

//函數(shù)表達式可以存儲在變量中
var sum = function(a, b) {
return a + b;
};
// 該變量可用作函數(shù)
var x = sum(100, 8);

上面的函數(shù)實際上是一個匿名函數(shù)（沒有名稱的函數(shù)）。

存儲在變量中的函數(shù)不需要函數(shù)名。始終使用變量名來調(diào)用它們。

上面的函數(shù)以分號結尾，因為它是可執(zhí)行語句的一部分。

函數(shù)提升

在本教程的前面，您了解了JavaScript提升。

提升是JavaScript將聲明移到當前作用域頂部的默認行為。

因此，可以在聲明JavaScript函數(shù)之前對其進行調(diào)用：

// 聲明前調(diào)用函數(shù)
greet();

function greet() {
  document.getElementById("output").innerHTML = "Hello World";
}

自執(zhí)行匿名函數(shù)

可以使函數(shù)表達式“自執(zhí)行”。

自執(zhí)行是一種JavaScript函數(shù)，它在定義后立即運行。

自動調(diào)用(啟動)自執(zhí)行表達式，而不需要調(diào)用它。也稱為IIFE(立即調(diào)用的函數(shù)表達式)。

如果函數(shù)表達式后跟（），則函數(shù)表達式將自動執(zhí)行。

(function () {
  // 要執(zhí)行的語句
})();

將IIFE分配給變量將存儲函數(shù)的返回值，而不是函數(shù)定義本身：

let result = (function () {
let name = "Seagull"; 
return name; 
})(); 

//立即創(chuàng)建輸出
result;   // "Seagull"

下面的示例演示如何將參數(shù)傳遞給IIFE(立即調(diào)用的函數(shù)表達式)：

(function (x, y) {
  document.getElementById("output").innerHTML = x + y;
})(5, 10);

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

回調(diào)函數(shù)是作為參數(shù)傳遞給另一個函數(shù)的函數(shù)，然后在外部函數(shù)中調(diào)用它來完成某種例程或操作。

function greet(name) {
  alert("Hello " + name);
}

function processInput(callback) {
  let name = prompt("Please enter your name:");
  callback(name);
}

// Passing greet function into processInput function as an argument
processInput(greet);

上面的示例是一個同步回調(diào)，因為它將會立即執(zhí)行。

遞歸

遞歸是一種迭代操作的技術，方法是使函數(shù)重復調(diào)用自身直到獲得結果。

下面的示例使用遞歸獲取數(shù)字的階乘：

var factorial = function(number) {
  if (number <= 0) {
 return 1;
  } else {
 return (number * factorial(number - 1));
  }
};

document.getElementById("output").innerHTML = factorial(5);

箭頭函數(shù)

到目前為止，我們已經(jīng)介紹了如何使用function關鍵字定義函數(shù)。

但是，從ECMAScript 6開始，有一種更新，更簡潔的方法來定義一個稱為箭頭函數(shù)表達式的函數(shù)。

眾所周知，箭頭函數(shù)用等號后跟大于號表示：=>。

//函數(shù)表達式
var sum = function(x, y) {
   return x + y;
}

// 箭頭函數(shù)
const sum = (x, y) => x + y;

箭頭函數(shù)沒有自己的this。它們不適用于定義對象方法。

箭頭功能未提升。必須先定義它們，然后再使用它們。

使用const比使用更加安全var，因為函數(shù)表達式始終為常數(shù)。

return如果函數(shù)是單個語句，則只能省略關鍵字和大括號。因此，始終保留它們可能是一個好習慣。

僅當函數(shù)是單個語句時，才能省略 return 關鍵字和大括號。所以，永遠保留使用它們是一個好習慣。

const sum = (x, y) => { return x + y };