箭頭函式與普通函式的區別

箭頭函式是ES2015新增，具體參閱JavaScript 箭頭函式一章節。

只要明確知曉箭頭函式的用法，它與普通函式區別自然明晰。

但是對於初學者來說，對於箭頭函式的熟練使用與深刻理解需要一個過程。

本文總結一下普通函式與箭頭函式的區別，希望能夠使這一過程加速。

一.外形不同：

箭頭函式使用箭頭定義，普通函式中沒有。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
// 普通函式
function func(){
  // code
}
// 箭頭函式
let func=()=>{
  // code
}

這種表象的區別實在太明顯，無需多做介紹。

二.箭頭函式全都是匿名函式：

普通函式可以有匿名函式，也可以有具名函式。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
// 具名函式
function func(){
  // code
}

// 匿名函式
let func=function(){
  // code
}

程式碼說明如下：

（1）.第一個函式是具名函式，使用嚴格的函式宣告語法建立。

（2）.第二個是匿名函式，其實它的本質是宣告一個變數並賦值為一個匿名函式物件（函式沒有名稱）。

而箭頭函式全都是匿名函式，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
// 箭頭函式全都是匿名函式
let func=()=>{
  // code
}

三.箭頭函式不能用於建構函式：

普通函式可以用於建構函式，以此建立物件例項。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,age){
   this.webName=webName;
   this.age=age;
}
let antzone=new Antzone("螞蟻部落",5);
console.log(antzone.webName);

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

Antzone被用作建構函式，通過它可以建立物件例項。

但是箭頭函式並不能用作建構函式。

四.箭頭函式中this的指向不同：

this一直是讓初學者比較頭疼的概念。

在普通函式中，this總是指向呼叫它的物件或者，如果用作建構函式，它指向建立的物件例項。

具體參閱如下兩篇文章：

（1）.JavaScript this詳解一章節。

（2）.JavaScript建構函式一章節。

在箭頭函式中，this的指向發生了本質變化，為了節省篇幅，本文不做介紹。

具體參閱箭頭函式this指向詳解一章節。

五.箭頭函式不具有arguments物件：

每一個普通函式呼叫後都具有一個arguments物件，用來儲存實際傳遞的引數。

但是箭頭函式並沒有此物件。

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

六.其他區別：

（1）.箭頭函式不能Generator函式。

（2）.箭頭函式不具有prototype原型物件。

（3）.箭頭函式不具有super。

（4）.箭頭函式不具有new.target。