頭函數是ES6新增的一種函數簡寫形式。

箭頭函數的寫法更簡潔，當箭頭函數的函數體只有一個 `return` 語句時，可以省略 `return` 關鍵字和方法體的花括號

當參數只有一個的時候可以省略小括號

箭頭函數和普通有很多不同，最主要就是改變的了this的指向

箭頭函數內部的this由上下文決定。可以理解為箭頭函數在定義的時候this就已經確定了。而普通函數只有在調用的時候才指定this。

建函數還有另外一種非常簡單的語法，并且這種方法通常比函數表達式更好。

它被稱為“箭頭函數”，因為它看起來像這樣：

let func = (arg1, arg2, ..., argN) => expression;

這里創建了一個函數 func，它接受參數 arg1..argN，然后使用參數對右側的 expression 求值并返回其結果。

換句話說，它是下面這段代碼的更短的版本：

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

讓我們來看一個具體的例子：

let sum = (a, b) => a + b;

/* 這個箭頭函數是下面這個函數的更短的版本：

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

alert( sum(1, 2) ); // 3

可以看到 (a, b) => a + b 表示一個函數接受兩個名為 a 和 b 的參數。在執行時，它將對表達式 a + b 求值，并返回計算結果。

• 如果我們只有一個參數，還可以省略掉參數外的圓括號，使代碼更短。
• 例如：
• let double = n => n * 2; // 差不多等同于：let double = function(n) { return n * 2 } alert( double(3) ); // 6
• 如果沒有參數，括號將是空的（但括號應該保留）：
• let sayHi = () => alert("Hello!"); sayHi();

箭頭函數可以像函數表達式一樣使用。

例如，動態創建一個函數：

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello') :
  () => alert("Greetings!");

welcome();

一開始，箭頭函數可能看起來并不熟悉，也不容易讀懂，但一旦我們看習慣了之后，這種情況很快就會改變。

箭頭函數對于簡單的單行行為（action）來說非常方便，尤其是當我們懶得打太多字的時候。

多行的箭頭函數

上面的例子從 => 的左側獲取參數，然后使用參數計算右側表達式的值。

但有時我們需要更復雜一點的東西，比如多行的表達式或語句。這也是可以做到的，但是我們應該用花括號括起來。然后使用一個普通的 return 將需要返回的值進行返回。

就像這樣：

let sum = (a, b) => {  // 花括號表示開始一個多行函數
  let result = a + b;
  return result; // 如果我們使用了花括號，那么我們需要一個顯式的 “return”
};

alert( sum(1, 2) ); // 3

更多內容

在這里，我們贊揚了箭頭函數的簡潔性。但還不止這些！

箭頭函數還有其他有趣的特性。

為了更深入地學習它們，我們首先需要了解一些 JavaScript 其他方面的知識，因此我們將在后面的 深入理解箭頭函數 一章中再繼續研究箭頭函數。

現在，我們已經可以用箭頭函數進行單行行為和回調了。

總結

對于一行代碼的函數來說，箭頭函數是相當方便的。它具體有兩種：

1. 不帶花括號：(...args) => expression — 右側是一個表達式：函數計算表達式并返回其結果。
2. 帶花括號：(...args) => { body } — 花括號允許我們在函數中編寫多個語句，但是我們需要顯式地 return 來返回一些內容。

任務

用箭頭函數重寫

用箭頭函數重寫下面的函數表達式：

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 ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  () => alert("You agreed."),
  () => alert("You canceled the execution.")
);

是不是看起來精簡多了？

于我們將使用瀏覽器作為我們的演示環境，讓我們看幾個與用戶交互的函數：alert，prompt 和confirm。

alert

這個我們前面已經看到過了。它會顯示一條信息，并等待用戶按下 “OK”。

例如：

alert("Hello");

彈出的這個帶有信息的小窗口被稱為 模態窗。“modal” 意味著用戶不能與頁面的其他部分（例如點擊其他按鈕等）進行交互，直到他們處理完窗口。在上面示例這種情況下 —— 直到用戶點擊“確定”按鈕。

prompt

prompt 函數接收兩個參數：

result = prompt(title, [default]);

瀏覽器會顯示一個帶有文本消息的模態窗口，還有 input 框和確定/取消按鈕。

title顯示給用戶的文本default可選的第二個參數，指定 input 框的初始值。

語法中的方括號 [...]

上述語法中 default 周圍的方括號表示該參數是可選的，不是必需的。

訪問者可以在提示輸入欄中輸入一些內容，然后按“確定”鍵。然后我們在 result 中獲取該文本。或者他們可以按取消鍵或按 Esc 鍵取消輸入，然后我們得到 null 作為 result。

prompt 將返回用戶在 input 框內輸入的文本，如果用戶取消了輸入，則返回 null。

舉個例子：

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

IE 瀏覽器會提供默認值

第二個參數是可選的。但是如果我們不提供的話，Internet Explorer 會把 "undefined" 插入到 prompt。

我們可以在 Internet Explorer 中運行下面這行代碼來看看效果：

let test = prompt("Test");

所以，為了 prompt 在 IE 中有好的效果，我們建議始終提供第二個參數：

let test = prompt("Test", ''); // <-- 用于 IE 瀏覽器

confirm

語法：

result = confirm(question);

confirm 函數顯示一個帶有 question 以及確定和取消兩個按鈕的模態窗口。

點擊確定返回 true，點擊取消返回 false。

例如：

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // 如果“確定”按鈕被按下，則顯示 true

總結

我們學習了與用戶交互的 3 個瀏覽器的特定函數：

alert顯示信息。prompt顯示信息要求用戶輸入文本。點擊確定返回文本，點擊取消或按下 Esc 鍵返回 null。confirm顯示信息等待用戶點擊確定或取消。點擊確定返回 true，點擊取消或按下 Esc 鍵返回 false。

這些方法都是模態的：它們暫停腳本的執行，并且不允許用戶與該頁面的其余部分進行交互，直到窗口被解除。

上述所有方法共有兩個限制：

1. 模態窗口的確切位置由瀏覽器決定。通常在頁面中心。
2. 窗口的確切外觀也取決于瀏覽器。我們不能修改它。

這就是簡單的代價。還有其他一些方法可以顯示更漂亮的窗口，并與用戶進行更豐富的交互，但如果“花里胡哨”不是非常重要，那使用本節講的這些方法也挺好。

任務

創建一個簡單的頁面

重要程度: 4

創建一個要求用戶輸入 name，并通過瀏覽器窗口對鍵入的內容進行輸出的 web 頁面。

解決方案

JavaScript 代碼：

let name = prompt("What is your name?", "");
alert(name);

整個頁面的代碼：