การทำความเข้าใจ this ในภาษา JavaScript, แนวคิดและข้อควรระวัง
this ในภาษา Javascript เป็นคำสำคัญที่อ้างอิงถึงบริบทของการเรียกใช้งานฟังก์ชันหรือออบเจกต์ที่กำลังถูกเรียกใช้งาน ณ ขณะนั้น แต่ this ใน JavaScript อาจทำให้เกิดความสับสนได้ เนื่องจากค่าของมันเปลี่ยนแปลงไปตามวิธีการที่ฟังก์ชันถูกเรียกใช้ ซึ่งเป็นข้อควรระวังที่สำคัญในการเขียนโปรแกรมด้วยภาษา Javascript ต่อไปนี้คือรายละเอียดและข้อควรระวังเกี่ยวกับ this
1. บริบทในฟังก์ชันทั่วไป
function show() {
console.log(this);
}
show(); // Window (ในเบราว์เซอร์) หรือ undefined ในโหมด strict
ในฟังก์ชันทั่วไป this จะอ้างอิงถึง global object ซึ่งในเบราว์เซอร์จะเป็น window และในโหมด strict จะเป็น undefined หากฟังก์ชันไม่ได้ถูกเรียกผ่านออบเจกต์
2. บริบทในฟังก์ชันที่อยู่ภายในออบเจกต์
const obj = {
name: "John",
showName: function() {
console.log(this.name);
}
};
obj.showName(); // "John"
ในกรณีนี้ this จะอ้างอิงถึงออบเจกต์ obj ดังนั้นจึงสามารถเข้าถึงคุณสมบัติของออบเจกต์นั้นได้
3. บริบทในฟังก์ชันลูกศร (Arrow Functions)
const obj = {
name: "John",
showName: () => {
console.log(this.name);
}
};
obj.showName(); // undefined
ฟังก์ชันลูกศร (arrow function) จะไม่มี this ของตัวเอง แต่จะใช้ this จากบริบทภายนอกที่มันถูกสร้างขึ้น (lexical this) ในตัวอย่างนี้ this อ้างอิงถึงบริบทที่อยู่นอกออบเจกต์ obj ซึ่งไม่มี name
4. บริบทในการเรียกฟังก์ชันด้วยวิธี call, apply, และ bind
function show() {
console.log(this.name);
}
const obj = { name: "Alice" };
show.call(obj); // "Alice"
เมธอด call และ apply สามารถใช้เพื่อกำหนดค่า this ให้กับฟังก์ชันได้ ในขณะที่ bind จะสร้างฟังก์ชันใหม่ที่มีค่า this ถูกล็อกไว้อย่างถาวร
5. บริบทใน Constructor Function
function Person(name) {
this.name = name;
}
const person = new Person("John");
console.log(person.name); // "John"
เมื่อใช้ฟังก์ชันร่วมกับ new ในการสร้างออบเจกต์ใหม่ this จะอ้างอิงถึงออบเจกต์ใหม่ที่ถูกสร้างขึ้น
ข้อควรระวัง
- การใช้
thisในฟังก์ชันลูกศร ควรระวังเมื่อใช้ฟังก์ชันลูกศรในสถานการณ์ที่ต้องการอ้างอิงถึงออบเจกต์ เนื่องจากฟังก์ชันลูกศรไม่มีthisของตัวเอง thisใน Event Handlers ในการจัดการเหตุการณ์ (event handlers),thisมักจะอ้างอิงถึงออบเจกต์ที่เป็นต้นเหตุของเหตุการณ์ ซึ่งอาจไม่ใช่สิ่งที่ต้องการเสมอไป- การใช้
thisใน Callback Functions เมื่อใช้thisในฟังก์ชัน callback หรือ asynchronous functions ค่าของthisอาจไม่เป็นไปตามที่คาดหวัง เนื่องจากบริบทการเรียกใช้งานเปลี่ยนไป - การเรียกฟังก์ชันโดยตรง ถ้าเรียกฟังก์ชันโดยไม่ผ่านออบเจกต์ (เช่น
func()),thisจะอ้างอิงถึงglobal objectหรือundefinedใน strict mode
การทำความเข้าใจการทำงานของ this เป็นสิ่งสำคัญในการหลีกเลี่ยงข้อผิดพลาดในการเขียนโปรแกรมด้วยภาษา Javascript และช่วยให้การเขียนโค้ดมีประสิทธิภาพและเข้าใจง่ายขึ้น