มาพูดถึง Pattern ในการสร้าง object ใน JavaScript

ในการสร้าง object ใน JavaScript โดยปกติทั่วไปเราจะเขียน code แบบนี้

1
2
3
4
5
6
7
var obj = {
     name    : 'สมจิตร',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

ซึ่งจริงๆก็มีการเขียนได้ 2 แบบ แต่เอาเป็นแบบนี้แบบเดียวก่อนแล้วกันเดี๋ยวค่อยเอามาเขียนถึงอีกทีนึง ก็คงจะไม่เป็นปัญหาอะไรถ้าเรามี object แค่ตัวเดียวแต่ปัญหาจะเกิดขึ้นทันทีถ้าเรามี object มากกว่า 1 ตัว เช่นถ้าประกาศ obj ไว้ 2 ตัวแบบนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var somjit= {
     name    : 'สมจิตร',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

var somjai= {
     name    : 'สมใจ',
     surName : 'ใจดี',
     greet   : function(){
        console.log('สวัสดี!');
     }
};

ซึ่งจะเห็นว่าทั้งสองตัวนั้นเป็น object ที่เป็นประเภทเดียวกันหรือมี class เดียวกันนั่นเอง code ของทั้ง 2 object นี้จะซ้ำซ้อนกันทำให้การแก้ไขนั้นจะทำได้ลำบาก ถ้าเป็นในภาษาอื่นๆทั่วไปจะไม่เกิดปัญหานี้เพราะเราจะไม่สามารถสร้าง object ขึ้นมาโดยตรงได้เราต้องสร้าง class ขึ้นมาก่อน แต่ในภาษาของ JavaScript นั้นไม่มีการประกาศ class เหมือนในภาษาอื่นๆ ดังนั้นการจะ define class ขึ้นมาจำเป็นต้องเขียนเป็น function ซึ่งมีวิธีการเขียนได้ 2 วิธีคือ แบบแรกจะเขียนเป็น function แล้วค่อย new object ขึ้นมาใช้งานแบบนี้

1
2
3
4
5
6
7
function Person(name, surName){ // parameter นี่จะอารมณ์เดียวกับ constructor
     this.name = name;
     this.surName = surName;
     this.greet = function(){
        console.log('สวัสดี!');
     };
}

เวลาใช้งานก็จะต้องเขียนแบบนี้

1
2
3
4
5
var obj  = new Person('สมจิตร', 'ใจดี'); // จะใส่ parameter หรือไม่ก็ได้
obj.greet();

var obj2 = new Person('สมใจ', 'ใจดี'); 
obj2.greet();

จะเห็นว่าเราสามารถที่จะ new Person (ที่มองเสมือนว่าเป็น class) ไปได้เรื่่อยๆ code ก็จะสั้นลงเยอะมาก

ส่วนอีกวิธีนึงเราก็จะทำการสร้าง function เหมือนกัน แต่เป็น function ที่ return ผลลัพธ์ออกมาเป็น object ถ้ายังงงหรือสงสัยให้ลองหาอ่านเกี่ยวกับ Factory Pattern ใน Design Pattern ทั่วๆไปเพิ่มเติม โดยหลักการสั้นๆของ Factory Pattern จะเป็นเหมือนโรงงานผลิต object โดยเขียน code แบบนี้

1
2
3
4
5
6
7
8
9
10
// ถ้าเจอชื่อ createObject หรือ getInstance ให้รู้ได้เลยว่า Factory Pattern ชัวร์
var createObject = function(name, surName){ 
    return {
        name  : name,
        surName : surName,
        greet : function(){
            console.log('สวัสดี!');
        }
    };
};

เวลาสร้าง object ขึ้นมาใช้งานก็เขียนประมาณนี้

1
2
3
4
var obj  = createObject('สมจิตร', 'ใจดี');
obj.greet();
var obj2 = createObject('สมใจ', 'ใจดี');
obj2.greet();

ทั้งสองแบบนี้เป็นตัวอย่างของการสร้าง object ใน javaScript ที่ค่อนข้างจะเป็นมาตรฐานซักหน่อยเขียนแล้วอ่านง่าย แล้วก็ค่อยดูเป็น Object Oriented ซักหน่อย