Article

การสร้างอ็อบเจกต์ ในภาษา JavaScript

โดย สรวุฒิ กอสุวรรณศิริ

เพื่อนๆหลายคงคงเคยเขียนโปรแกรมในภาษาอื่นๆ กันมาแล้วนะครับ ในภาษาโปรแกรมที่เป็น OOP อย่าง JAVA, C , Visual Basic ต่างก็มีวิธีการประกาศและสร้างคลาสขึ้นมาใช้ในโปรแกรม แต่ใน JavaScript เพื่อนๆคงไม่เคยเห็น เพราะ JavaScript เป็นภาษาที่เตรียมคลาสต่างๆ ไว้ให้เราใช้หมดแล้ว อย่าง window document form ซึ่งส่วนใหญ่ก็เป็น elements ในแท็ก HTML ที่อยู่ในเอกสาร หรือไม่ก็เป็นพวก Window แต่ในบางครั้ง ถ้าเราจำเป็นต้องเขียน คลาสขึ้นมาเอง เราจะทำอย่างไร ในบทความนี้เราจะมาเรียนไวยากรณ์ ของการสร้างคลาส พรอเพอร์ตี และการสร้างเมทธอด กันครับ

การประกาศคลาส

วิธีประกาศคลาสใน JavaScript ใช้คำสั่ง function() เหมือนการสร้างฟังก์ชั่นครับ
ในตัวอย่างเป็นการประกาศคลาสชื่อ welcome

function welcome() { }

และการประกาศคลาส เป็นการประกาศฟังก์ชั่นสร้างอ็อบเจกต์ (Constructor) ไปในตัวด้วย สามารถ ส่งค่าพารามิเตอร์ต่างๆเข้าไปเพื่อใช้เป็นค่าเริ่มต้นของ Properties ต่างๆได้ด้วย สำหรับ การประกาศพรอเพอร์ตี้ ใช้คำสั่ง this.ชื่อพรอเพอร์ตี=ค่าเริ่มต้น ดังตัวอย่าง

function welcome(vname) { this.visitor_name=vname; }

ส่วนการประกาศเมทธอด ให้ไปเขียนฟังก์ชั่นที่จะใช้เป็นเมทธอดก่อน แล้วค่อยมากำหนดในส่วนประกาศคลาส ภายในเมทธอด สามารถเรียกใช้พรอเพอร์ตีและเมทธอดต่างๆในคลาสได้ โดยใช้ คำว่า this (ดูในตัวอย่าง)
สมมุติว่าผมมีฟังก์ชั่น welcome_display() มีรายละเอียดดังนี้

function welcome_display() { alert('สวัสดีครับ คุณ '+this.visitor_name+' ยินดีต้อนรับสู่ Realdev.net'); }

เมื่อเขียนฟังก์ชั่นเสร็จแล้ว ก็เอามาประกาศว่าเป็นเมทธอด Greeting ด้วยวิธีนี้ครับ (ที่ชื่อฟังก์ชั่น ไม่ต้องมี () )

function welcome(vname) { this.visitor_name=vname; this.Greeting=welcome_display; }

สำหรับการเรียกใช้ Class เราก็ต้องใช้คำสั่ง new เพื่อสร้างอ็อบเจกต์ขึ้นมาก่อน แล้วจึงนำอ็อบเจกต์ที่ประกาศไปใช้ได้ครับ

var massage=new welcome('สรวุฒิ'); massage.Greeting();

อ่านมาจนจบท่านคงคิดว่า โปรแกรมในตัวอย่างไม่ต้องทำคลาสก็ได้ แล้วเทคนิกนี้มันจะเอาไปใช้ทำอะไรได้บ้าง ข้อนี้ขอตอบว่า เวลาจะเขียนอะไรที่มันซับซ้อน ถ้าท่านใช้วิธีนี้อาจจะทำให้เขียนได้ง่ายขึ้น ตัวอย่างของ Script ที่ผมทำเป็นอ็อบเจกต์ก็มีให้ท่านเห็นครับ เมนูที่เลื่อนๆอยู่ทางซ้ายนั่นไง ไว้โอกาสหน้าผมจะเขียนวิธีสร้างเมนูของ Realdev.net มาให้อ่านกันนะครับ วันนี้ขอนอนก่อน สวัสดีครับ:-)

Back top top

		© copyright 2001 Sorrawut Korsuwansiri