การสูญเสีย context ในโค้ดเมธอดของ OOP ใน JavaScript

เมื่อใช้โค้ดต้นฉบับของเมธอดคลาส context อาจสูญหายไป มาดูตัวอย่างกัน สมมติว่าเรามีคลาสต่อไปนี้:

javascriptclass User {
  #name;
  
  constructor(name) {
    this.#name = name;
  }
  getName() {
    return this.#name;
  }
}

มาสร้างอ็อบเจ็กต์ของคลาสนี้:

javascriptlet user = new User('john');

เขียนโค้ดเมธอดลงในตัวแปร:

javascriptlet func = user.getName;

ในขณะที่เขียนเมธอดลงในตัวแปร context ก็สูญหายไป ตอนนี้ this ภายในโค้ดเมธอดจะไม่ชี้ไปที่ อ็อบเจ็กต์ของคลาส ลองตรวจสอบ เรียก ฟังก์ชันของเรา:

javascriptconsole.log(func()); // ข้อผิดพลาด

เพื่อแก้ปัญหา สามารถผูก context กับฟังก์ชันได้ เช่น ผ่าน bind:

javascriptfunc = func.bind(user);
console.log(func()); // ทำงาน