JavaScript 箭頭函式

既然稱作箭頭函式，可以猜想，函式的構成可能與箭頭相關。

事實也是如此，看一段簡單程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = arg => arg;
console.log(func(5));

程式碼執行效果截圖如下：

上面是一個簡單箭頭函式的執行演示，傳遞引數，並返回引數本身。

先總結大致總結一下箭頭函式的特點，然後再一一通過程式碼例項演示。

特點如下：

（1）.通過=>箭頭定義。

（2）.箭頭函式都是匿名函式。

（3）.函式中this與普通函式相比發生很大變化。

（4）.箭頭函式不能用作建構函式。

（5）.箭頭函式不能用作Generator函式。

一.使用箭頭定義函式：

重複一下前面的程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = arg => arg;
console.log(func(5));

程式碼分析如下：

（1）.箭頭的左側是給函式傳遞的引數，是否需要小括號後面介紹。

（2）.箭頭的右側是函式體，可以省略大括號，不過是有條件的。

（3）.函式返回值為5，但沒有使用return語句，後面具體分析。

上面對箭頭函式進行了一些總結分析，並提出了一些問題，下面做一下解答。

小括號是否可以省略：

箭頭函式沒有引數或者具有多個引數，引數部分必須使用小括號。

[JavaScript] 純文字檢視 複製程式碼
let func = arg => arg;

上面程式碼只有一個引數，小括號可以省略。

[JavaScript] 純文字檢視 複製程式碼
let func = () => 5;

箭頭函式如果沒有規定引數，小括號不能省略。

[JavaScript] 純文字檢視 複製程式碼
let func = (x, y) => x + y;

箭頭函式如果規定多個引數，小括號不能省略。

函式體大括號是否可以省略：

=>箭頭右側是函式體，如果函式體中有多條語句，那必須使用大括號包裹。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = (a, b) => {
  let num=a+b;
  return num;
}
console.log(func(3,4));

上面的程式碼中，箭頭函式的函式體具有多條語句，那麼函式體必須使用大括號包裹。

是否使用return語句返回值：

如果函式體使用大括號包裹，那麼返回值必須使用return語句。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = arg => arg;
console.log(func(5));

程式碼執行效果截圖如下：

上面程式碼沒有使用大括號包裹函式體，這時候正常返回值。

如果使用大括號包裹函式體，那麼如果想要返回值，則必須使用return語句。

程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = arg => {
    return arg
};
console.log(func(5));

程式碼執行效果截圖如下：

二.箭頭函式一些其他特性：

如果返回一個字面量，需要用小括號將其包裹，或者使用大括號包裹。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = () => ({webName:"螞蟻部落"})
console.log(func().webName);

不包裹，那麼大括號就會被解析為函式體的大括號。

也可以使用如下程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = () => {return {webName:"螞蟻部落"}}
console.log(func().webName);

箭頭函式也可以使用解構賦值，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = ([webName,age=4]) => [webName,age];
console.log(func(["螞蟻部落",6]));

程式碼執行效果截圖如下：

關於函式結構賦值可以參閱JavaScript 函式引數解構賦值一章節。

箭頭函式也可以使用剩餘運算子，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = (a,...rest) => rest
console.log(func(1,2,3,4,5));

程式碼執行效果截圖如下：

關於剩餘運算子可以參閱JavaScript剩餘運算子一章節。

三.箭頭函式中this指向：

普通函式中this的指向可以參閱JavaScript this用法詳解一章節。

箭頭函式中的this指向與普通函式的this相比已經發生了本質的變化。

箭頭函式本身沒有this，但是在它宣告的時候，能夠捕獲此函式所在作用域中this。

捕獲成功後，this指向的物件始終保持不變。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url = "softwhy.com";
function Antzone(){
  this.url = "www.softwhy.com";
  let func=() => {
    console.log(this.url);
  }
  func();
}
let antzone = new Antzone();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.使用new呼叫建構函式時，會進入此函式作用域。

（2）.此作用域中的this指向物件例項antzone。

（3）.箭頭函式是在建構函式執行時宣告，這時就會捕獲這個this。

（4）.這個this是指向物件例項antzone的，所以箭頭函式呼叫返回值就是"www.softwhy.com"。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var url = "softwhy.com";
function Antzone(){
  let func=() => {
    console.log(this.url);
  }
  func();
}
Antzone();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.Antzone作為一個普通函式執行。

（2）.它執行的時候會建立函式作用域，此作用域中this指向全域性物件window。

（3）.那麼箭頭函式就會捕獲這個this。

（4）.最終列印結果是"softwhy.com"。

由於箭頭函式本身沒有this，且宣告時捕獲this後，不再發生改變，所以常見的改變this指向的操作會失效，比如利用call、apply或者bind方法。

四.箭頭函式沒有arguments物件：

關於arguments物件可以參閱JavaScript arguments物件詳解一章節。

但是箭頭函式沒有此物件，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = arg =>{
  console.log(arguments[0]);
}
func(5);

程式碼執行效果截圖如下：

由此可見箭頭函式並沒有arguments物件。

箭頭函式還具有如下特點：

（1）.文章開頭已經介紹箭頭函式不能用作建構函式和Generator函式。

（2）.箭頭函式不能用作建構函式，那麼也就沒有prototype屬性。

這裡不再演示，感興趣的可以自行測試一下，如果實在懶惰，那麼直接記住結論即可。