ตัวแปร this ใน javascript ทำงานยังไง (เกี่ยวกับ Function Invocation Pattern)
- by NAzT
ถ้าพูดถึงตัวแปร this ในโลกของการเขียนโปรแกรมแบบ Object Oriented ผมจะตีความตัวแปร this ว่ามันจะต้องหมายถึงตัว object นั้นๆ ที่กำลังทำงานอยู่ เป็นแน่แท้…..
แต่มันไม่ใช่แบบนั้นใน javascript น่ะสิ!! …. อ้าวอ้าว ยังไง ตอบมาให้เคลียร์เลย
คือหยั่งงี้ครับ… เพราะว่าตัวแปร this ใน javascript มันจะหมายถึง Object อะไรนั้นมันขึ้นอยู่กับวิธีการเรียกใช้ฟังก์ชั่น (invocation pattern) ซึ่งมีด้วยกัน 4 แบบ ดังนี้
- Method Invocation Pattern
- Function Invocation Pattern
- Constructor Invocation Pattern
- Apply Invocation Pattern
ขยายความดังนี้นะครับ
- Method Invocation Pattern เป็นการเรียก Function ที่อยู่ในObject หรือที่เรียกว่า Method นั่นเอง ตัวอย่างเช่น
- Function Invocation Pattern หมายถึงการเรียกใช้ Function ตรงๆเลย ในกรณีนี้ this จะกลายเป็น global object ในทันที…
- Constructor Invocation Pattern ก็พวกที่มีการใช้ new operator ซึ่งกรณีนี้ this จะหมายถึงตัว Object ใหม่ที่เพิ่งถูก new ขึ้นมานั่นเอง…
- Apply Invocation Pattern คือ การระบุตัวตน this อย่างเปิดเผยชัดเจน ซึ่งสามารถใช้คำสั่ง call หรือ apply ก็ได้ แบบนี้เลยครับ
จะว่าไป ทุกข้อที่กล่าวมาก็ดู simple หมดเลยนี่ไม่เห็นมีอะไรซับซ้อนเลยนี่นา…
แต่ว่าถ้าเราเจอ code ลักษณะอย่างข้างล่างนี้ เราก็อาจจะสับสันกันไปบ้างอะไรบ้าง
- ลักษณะที่มีการใช้ helper function ใน object
ซึ่งเรา Work Around ได้แบบข้างล่างนี้ (ตอนนี้ก็ให้ใช้ ตัวแปร that แทน this นะครับ)
- ลักษณะที่มีการเอา method มาเก็บไว้ในตัวแปร (เป็น code ที่เขียนเพิ่มเติมมาจากตัวอย่างในข้อที่ 1) ลักษณะนี้เราก็อาจจะสับสนกันไปได้อีก ว่าทำไม this กลายเป็น global object ไปอีก… ลักษณะแบบนี้ต้องใช้ Function.call หรือ Function.apply ระบุตัวตน this แล้วล่ะครับ
สรุป
ไอ้ตรงผมที่งงนานๆมันคือเรื่องเกี่ยวกับ Helper Function ใน Object ซึ่งในหัวจะพยายาม solve พยายามตีความว่า ตัวแปร this ควรจะเป็น object อะไร
ก็ให้ดูลักษณะการเรียก function ว่าเป็นแบบไหน เป็นการเรียกตรงๆ หรือเรียกผ่าน method -/-
Reference.
- http://bonsaiden.github.com/JavaScript-Garden/
- http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742
เรื่องที่เกี่ยวข้อง