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

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

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

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

let user = new User('john');

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

let func = user.getName;

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

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

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

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