JavaScript OOP - Create an Object

JavaScript เป็นภาษาในลักษณะที่เรียกว่า Object Based Language หรือบางครั้งก็เรียกกันว่า Prototype Based Language (เพราะไม่มีการ Class) เราสามารถสร้าง Object ได้โดยวิธีการเพิ่ม properties เข้าไป ซึ่ง properties ในที่นี้ อาจจะเป็น data หรือ function ก็ได้ ซึ่งทำให้ JavaScript เป็นภาษาที่มีความยืดหยุ่นสูง เพราะสามารถเพิ่ม property, method หรือแม้กระทั่งเปลี่ยน binding ของ method ได้ในขณะ Run Time สำหรับวิธีการ define Class ใน JavaScript สามารถทำได้โดยใช้การสร้าง Constructor Function ตามตัวอย่างดังต่อไปนี้

สังเกตุว่าเราจะตั้งชื่อ Constructor ตามชื่อ Class ที่เราต้องการ และการ initialize ข้อมูลภายใน Class เราจะทำผ่านตัวแปรที่ชื่อว่า this  ส่วน method ที่เราสร้างขึ้น เราจะกำหนดผ่าน prototype ให้สังเกตุว่าเราจะไม่กำหนดผ่าน this เพราะการกำหนดผ่าน this จะทำให้เกิดการ binding method reference ใหม่ทุกครั้งที่มีการสร้าง instance ซึ่งนอกจากจะเสียเวลาแล้ว ยังสิ้นเปลือง memory โดยไม่จำเป็น (เพราะ method ที่ assign ผ่าน this แบบนี้ จะมี reference ที่แตกต่างกันในแต่ละ instance ซึ่งจะต่างจาก method ที่ assign ผ่าน prototype ซึ่งทุกๆ method ในแต่ละ instance จะมี reference เดียวกัน) สำหรับการนำ Object ไปใช้งาน สามารถทำได้ดังต่อไปนี้

จากตัวอย่างข้างต้น เมื่อเราทำการเรียก Constructor Function ด้วย new สิ่งที่เกิดขึ้นก็คือ JavaScript จะทำการกำหนด property ที่ชื่อว่า prototype ของ object ที่สร้างขึ้นมาใหม่ เข้ากับ prototype ของ Constructor ที่เราสร้างขึ้นก่อนหน้า ทำให้ Object ที่สร้างขึ้นมาใหม่ มี properties เดียวกันกับที่กำหนดไว้ใน Constructor หรือถ้าจะให้เข้าใจง่ายขึ้นมาหน่อยก็คือ instance ของ Class ที่สร้างขึ้นโดยคำสั่ง new จะมี property เหมือนกับที่กำหนดไว้ใน prototype ของ Constructor นั่นเอง

ก่อนที่จะจบบทความนี้ อยากให้สังเกตุว่า Function ค่อนข้างเป็นสิ่งที่มีบทบาทสำคัญในภาษา JavaScript อย่างที่เรามักจะเห็นกันตามหนังสือหรือในบทความ ที่มักจะเรียก Function ใน JavaScript ว่า First Class Citizen ซึ่งในที่นี้มีความหมายว่า JavaScript มองเห็น Function เป็น Object ตัวหนึ่ง ที่สามารถ Create ได้ในขณะ Run Time, สามารถใช้เป็น Parameter ได้, สามารถถูก Return ออกจาก Function ได้ หรือสามารถ Assign ให้ Variable ก็ทำได้

แหล่งที่มา

1. http://devedge-temp.mozilla.org/viewsource/2001/oop-javascript/
2. http://en.wikipedia.org/wiki/First-class_citizen