เมื่อไหร่ไม่ควรใช้ JavaScript Arrow Functions

ข้อควรระวัง

Arrow functions ไม่ควรใช้เป็น object method เพราะ arrow function ไม่มี this ของตัวเอง มันจะใช้ this จาก lexical scope ที่ล้อมรอบ (โดยปกติคือ window object) แทนที่จะเป็น object เอง สิ่งนี้อาจทำให้เกิดปัญหา เพราะเราจะกำหนดและเข้าถึง properties ของ window object แทน object ที่ต้องการ

ตัวอย่างโค้ด

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style> 
</head> 
<body> 
  <h1>When to not use the arrow functions</h1> 
  <br /> 
  <div class="result"></div> 
  <br /> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อเรียกเมธอด add() ของ object obj</h3> 
  <script> 
    let BtnEle = document.querySelector(".Btn"); 
    let resEle = document.querySelector(".result"); 
    let obj = { 
      a: 22, 
      b: 44, 
      add: () => { 
        return this.a + this.b; 
      }, 
    }; 
    BtnEle.addEventListener("click", (event) => { 
      resEle.innerHTML = `The sum of ${obj.a} and ${obj.b} = ${obj.add()}`; 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

ในตัวอย่าง obj.add เป็น arrow function ดังนั้น this จะชี้ไปที่ window object ไม่ใช่ obj ทำให้ this.a และ this.b เป็น undefined และผลรวมเป็น NaN ควรใช้ regular function แทน: add() { return this.a + this.b; }