ความแตกต่างระหว่างฟังก์ชันปกติและฟังก์ชันลูกศรใน JavaScript

ตาม MDN นิพจน์ฟังก์ชันลูกศรเป็นทางเลือกที่กระชับทางวากยสัมพันธ์กับนิพจน์ฟังก์ชันปกติ แม้ว่าจะไม่มีการผูกกับสิ่งนี้ อาร์กิวเมนต์ super หรือ new.target คีย์เวิร์ดก็ตาม นิพจน์ฟังก์ชันลูกศรไม่เหมาะกับเมธอด และไม่สามารถใช้เป็นตัวสร้างได้

ฟังก์ชันปกติและฟังก์ชันลูกศรใน JavaScript มีความแตกต่างเล็กน้อย 3 ประการ

ไม่มีการผูกมัดนี้

ฟังก์ชันลูกศรไม่มีค่านี้ในตัวเอง ค่านี้ภายในฟังก์ชันลูกศรจะสืบทอดมาจากขอบเขตที่ล้อมรอบเสมอ

ตัวอย่าง

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

ผลลัพธ์

100
150
150

ดูว่าฟังก์ชันลูกศรเปลี่ยนวัตถุนี้นอกขอบเขต ฟังก์ชันปกติเพิ่งทำการเปลี่ยนแปลงภายในนี้เอง

ฟังก์ชันลูกศรไม่มีอาร์เรย์อาร์กิวเมนต์

ในอาร์เรย์อาร์กิวเมนต์ JS ในฟังก์ชันเป็นอ็อบเจ็กต์พิเศษที่สามารถใช้เพื่อรับอาร์กิวเมนต์ทั้งหมดที่ส่งผ่านไปยังฟังก์ชัน ในทำนองเดียวกัน ฟังก์ชันลูกศรไม่ได้ผูกกับอ็อบเจ็กต์อาร์กิวเมนต์ของตัวเอง แต่จะผูกกับอาร์กิวเมนต์ของขอบเขตที่ล้อมรอบ

ฟังก์ชันลูกศรสามารถเรียกได้แต่ไม่สามารถสร้างได้

หากฟังก์ชันสามารถสร้างได้ ก็สามารถเรียกใช้ด้วย new เช่น new User() หากฟังก์ชันสามารถเรียกใช้ได้ ก็สามารถเรียกได้โดยไม่ต้องมีการเรียกใช้ฟังก์ชันใหม่ (เช่น การเรียกใช้ฟังก์ชันปกติ)

ฟังก์ชันที่สร้างจากการประกาศ/นิพจน์ของฟังก์ชันนั้นสร้างได้และเรียกใช้ได้

ฟังก์ชันลูกศร (และวิธีการ) สามารถเรียกได้เท่านั้น ตัวสร้างคลาสนั้นสร้างได้เท่านั้น

หากคุณกำลังพยายามเรียกใช้ฟังก์ชันที่ไม่สามารถเรียกได้หรือเพื่อสร้างฟังก์ชันที่ไม่สามารถสร้างได้ คุณจะได้รับข้อผิดพลาดรันไทม์

let arrowFunc = () => {}
new arrowFunc()
This code gives the error:
arrowFunc is not a constructor