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

Published on
JavaScript
2015/07/how-to-create-class-in-javascript
Discord

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 ดังเช่น ตัวอย่างด้านล่างนี้ :

function Student(name) {
  this.name = name
  this.sayHello = function () {
    return "Hello guest!, I'm " + this.name
  }
}

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

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

Student.prototype.lastname = 'Doe'
Student.prototype.sayGoodBye = function () {
  return 'Bye Bye!'
}

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

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

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

var obj = {}

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

var obj = new Object()

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

var john = {
  name: 'John',
  sayHello: function () {
    return "Hello guest!, I'm " + this.name
  }
}

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

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

john.lastname = 'Doe'
john.sayGoodBye = function () {
  return 'Bye Bye!'
}

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

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

Buy Me A Coffee
Authors
Discord