SOFTWARE DEVELOPMENT | 1 min read

JS class syntax

By Ford on 02 Jul 2020
sennalabs-blog-banner
 
เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม  blueprint 
หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class เรานั้น จะมีการตั้งค่าเริ่มต้นหรือ constructor เพื่อให้เป็นการทำงานเริ่มต้นของการสร้าง object นึง 
หน้าตาในการเรียกใช้งานจะคล้ายๆกับ การประกาศเรียกใช้ ฟังชันท์เลย โดยมีการเพิ่ม new ต่อหน้า เช่น 
class example { }  // สำหรับการประกาศ classconst objectExample = new example()  // สำหรับการประกาศเรียกใช้งานโดยการทำงานของ class นั้นเมื่อมีการเรียก 
การสร้าง class ขึ้น ตัว class จะมองหา constructor ภายใน class เป็นตัวแรกเสมอ 

พูดให้เข้าใจง่ายๆ คือ หากเราต้องการส่ง parameter ให้กับ class เหมือนกับ function ก็เพียงต้องมี constructor ใน class เสมอ ดังตัวอย่างนี้

class exampleWithConstructor {  // การประกาศ class โดยมี constructor
                    constructor(param) {
                        this.param = param;    
                    }
                }
                
                // ประกาศการใช้งาน class โดยส่ง param
                const objectExampleWithConstructor = exampleWithConstructor('test')  
 
และเมื่อเราลอง console.log( objectExampleWithConstructor ) ออกมาดูจะเห็นว่า
สิ่งที่ออกมามันคือ Object type ที่มี attributes ตามใน constructor ที่เราสร้่างไว้และมี prototype ( __proto__ ) เป็น class 
ที่เราสร้างไว้

โดยถ้าเราสร้าง Method ไว้ภายใน object ด้วยเมื่อลอง console.log ดูอีกที ภายใน prototype ( __proto__ ) ก็จะมี method ที่เราเพิ่งสร้างไว้ เช่น

 
class exampleWithConstructor {  // การประกาศ class โดยมี constructor
                    constructor(param){
                      this.param = param;    
                    }
                }
                exampleMethod() {  // สร้าง method ใน class
                    console.log('enter method')
                }
                const objectExampleWithConstructor = exampleWithConstructor('test') 
                objectExampleWithConstructor.exampleMethod()  // เรียกใช้งาน method ที่เราสร้างไว้

โดยเมื่อเรานำมาเทียบกับ การประกาศ function ปกติๆ เราจะไม่สามารถมาสร้าง โครงสร้างอะไรแบบนี้ได้เลย และ class ยังมีลูกเล่นให้ใช้งานอีกมากมาย เช่น การ inherit การ binding โดยสามารถนำมาสร้างโครงสร้างของ Object ที่เราต้องการได้ตามใจชอบ
Written By