วิธีการสร้างคลาสในภาษา JavaScript

JavaScript เป็นภาษาหนึ่งที่รองรับการเขียนโปรแกรมแบบ OOP (Object Oriented Programming) ก็คือการมองทุกอย่างเป็นวัตถุ มีการสร้าง instance object มีการสร้าง class (แต่ว่า JavaScript ไม่มีคลาสนี่นา ?) จริงๆแล้ว JavaScript ไม่มี class แต่เราจะใช้การสร้าง function นี่แหละ

Note : บทความนี้อ้างอิง JavaScript ES5 ฉะนั้นไม่พูดถึง Class สำหรับ ES6 นะครับ

สำหรับตัวอย่างการสร้าง class ใน JavaScript ก็มีตัวอย่างการสร้าง 2 แบบมานำเสนอ ดังนี้

1. สร้างคลาสโดยใช้ function

วิธีนี้เป็นวิธีที่นิยมวิธีหนึ่ง คือการสร้าง function ขึ้นมาธรรมดานี่แหละ ใช้ this ในการเซตค่า properties หรือ method และเมื่อต้องการสร้าง instance object ขึ้นมาใหม่ ก็ใช้คีย์เวิร์ด new ดังเช่น ตัวอย่างด้านล่างนี้ :

1
function Student(name) {
2
  this.name = name
3
  this.sayHello = function () {
4
    return "Hello guest!, I'm " + this.name
5
  }
6
}
7

8
var john = new Student('john')
9
john.sayHello() // output : "Hello guest!, I'm john"

และหากต้องการจะเพิ่ม properties หรือ method ก็สามารถทำได้โดยการใช้ prototype เช่น

1
Student.prototype.lastname = 'Doe'
2
Student.prototype.sayGoodBye = function () {
3
  return 'Bye Bye!'
4
}
5

6
var foo = new Student('foo')
7
foo.sayGoodBye() // output : 'Bye Bye!'

2. สร้างแบบ Object Literal

วิธีนี้เป็นวิธีการสร้าง Object แบบสั้นๆ และนิยมใช้กันมาก ตัวอย่าง เช่น

1
var obj = {}

ซึ่งมีค่าเท่ากับ

1
var obj = new Object()

ตัวอย่างการสร้าง Object Literal โดยการสร้าง properties และ method เหมือนอย่างแบบที่ 1 จะได้ดังนี้ :

1
var john = {
2
  name: 'John',
3
  sayHello: function () {
4
    return "Hello guest!, I'm " + this.name
5
  }
6
}
7

8
john.sayHello() // output : "Hello guest!, I'm john"

และหากต้องการจะเพิ่ม properties หรือ method ก็สามารถเพิ่มผ่าน notation (.) ได้เลย แบบนี้ :

1
john.lastname = 'Doe'
2
john.sayGoodBye = function () {
3
  return 'Bye Bye!'
4
}
5

6
john.sayGoodBye() // output : "Bye Bye!"

ช่วงนี้มีโอกาสได้อ่าน JavaScript ค่อนข้างบ่อย เลยเขียนเอาไว้เผื่อลืม หวังว่าอาจจะมีประโยชน์บ้าง ไม่มากก็น้อย :)