Class Syntax

Class Syntax ใน JavaScript: ก้าวสู่ Object-Oriented ที่ง่ายขึ้น

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Prototype Inheritance ซึ่งเป็นกลไกพื้นฐานที่ JavaScript ใช้ในการจำลองแนวคิด Object-Oriented Programming (OOP) แม้ว่า Prototype Inheritance จะทรงพลัง แต่ก็อาจมีความซับซ้อนและยากต่อการเข้าใจสำหรับผู้เริ่มต้น ในบทนี้ เราจะมาทำความรู้จักกับ class syntax ซึ่งถูกเพิ่มเข้ามาใน ECMAScript 2015 (ES6) เพื่อให้การเขียน OOP ใน JavaScript ง่ายขึ้นและใกล้เคียงกับภาษา OOP อื่นๆ มากยิ่งขึ้น

class Keyword: จุดเริ่มต้นของการสร้าง Class

class keyword เป็น syntax sugar ที่ช่วยให้เราสามารถสร้าง object และจัดการ inheritance ได้ง่ายขึ้น ภายใต้เบื้องหลัง class ยังคงใช้ Prototype Inheritance แต่มี syntax ที่อ่านง่ายและเป็นระเบียบมากขึ้น

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

ในตัวอย่างข้างต้น เราได้สร้าง class ชื่อ Animal โดยใช้ class keyword ภายใน class เรามี constructor method และ speak method

• constructor Method: เป็น method พิเศษที่ถูกเรียกใช้เมื่อเราสร้าง instance ใหม่ของ class นี้ ทำหน้าที่กำหนดค่าเริ่มต้นให้กับ properties ของ object
• Methods: เป็นฟังก์ชันที่กำหนดพฤติกรรมของ object ในตัวอย่างนี้ speak เป็น method ที่แสดงข้อความ

การสร้าง Instance ของ Class

เราสามารถสร้าง instance ของ class ได้โดยใช้ new keyword เช่นเดียวกับการสร้าง object ทั่วไป

const animal = new Animal("Generic Animal");
animal.speak(); // Output: Generic Animal makes a sound.

ในตัวอย่างนี้ เราได้สร้าง instance ชื่อ animal จาก class Animal และเรียกใช้ method speak

constructor Method: การกำหนดค่าเริ่มต้น

constructor method มีความสำคัญในการกำหนดค่าเริ่มต้นให้กับ properties ของ object ที่สร้างขึ้นจาก class

class Dog {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.name);  // Output: Buddy
console.log(dog.breed); // Output: Golden Retriever
dog.bark();        // Output: Woof!

ในตัวอย่างนี้ constructor รับ parameters name และ breed และกำหนดค่าให้กับ properties this.name และ this.breed ตามลำดับ

Inheritance: การสืบทอดคุณสมบัติ

หนึ่งในคุณสมบัติที่สำคัญที่สุดของ OOP คือ Inheritance หรือการสืบทอดคุณสมบัติ Class syntax ใน JavaScript สนับสนุนการสืบทอดคุณสมบัติโดยใช้ extends keyword

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // เรียก constructor ของ parent class
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }

  speak() {
    console.log(`${this.name} barks.`); // Overriding the speak method
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // Output: Buddy barks.
dog.bark();  // Output: Woof!
console.log(dog.breed); // Output: Golden Retriever

ในตัวอย่างนี้ Dog class สืบทอดมาจาก Animal class โดยใช้ extends Animal ภายใน Dog constructor เราเรียก super(name) เพื่อเรียก constructor ของ Animal class และกำหนดค่าให้กับ this.name นอกจากนี้ Dog class ยังมี method bark เป็นของตัวเอง และยัง override method speak จาก Animal class อีกด้วย

• extends Keyword: ใช้เพื่อระบุว่า class หนึ่งสืบทอดมาจากอีก class หนึ่ง
• super(): ใช้เพื่อเรียก constructor ของ parent class (super class) ต้องเรียก super() ก่อนที่จะใช้ this ใน constructor ของ child class
• Method Overriding: Child class สามารถกำหนด method ที่มีชื่อเดียวกันกับ method ใน parent class ได้ นี่เรียกว่า method overriding

กรณีใช้งานจริง: สร้างระบบจัดการผู้ใช้

ลองพิจารณาสถานการณ์ที่เราต้องการสร้างระบบจัดการผู้ใช้ โดยมีผู้ใช้ประเภทต่างๆ เช่น ผู้ดูแลระบบ (Admin) และผู้ใช้งานทั่วไป (User) เราสามารถใช้ class syntax เพื่อสร้างโครงสร้างที่ชัดเจนและง่ายต่อการจัดการ

class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }

  login() {
    console.log(`${this.username} logged in.`);
  }
}

class Admin extends User {
  constructor(username, email, role) {
    super(username, email);
    this.role = role;
  }

  publishArticle(title, content) {
    console.log(`Admin ${this.username} published article: ${title}`);
  }
}

const user = new User("john.doe", "john.doe@example.com");
user.login(); // Output: john.doe logged in.

const admin = new Admin("jane.doe", "jane.doe@example.com", "Super Admin");
admin.login(); // Output: jane.doe logged in.
admin.publishArticle("My First Article", "This is the content of my first article."); // Output: Admin jane.doe published article: My First Article

ในตัวอย่างนี้ User class เป็น class หลักที่เก็บข้อมูลพื้นฐานของผู้ใช้ ส่วน Admin class สืบทอดมาจาก User class และเพิ่มความสามารถในการ publish บทความ

ข้อผิดพลาดที่พบบ่อยและการแก้ไข

• ลืมเรียก super() ใน constructor ของ child class: หากคุณลืมเรียก super() ใน constructor ของ child class JavaScript จะ throw error "Must call super constructor in derived class before accessing 'this' or returning from derived constructor" เสมอ
• การใช้ this ก่อนเรียก super(): ห้ามใช้ this ก่อนที่จะเรียก super() ใน constructor ของ child class
• เข้าใจผิดว่า class เป็นสิ่งใหม่ทั้งหมด: จำไว้ว่า class เป็นเพียง syntax sugar ที่อยู่บนพื้นฐานของ Prototype Inheritance การเข้าใจ Prototype Inheritance จะช่วยให้คุณเข้าใจการทำงานของ class ได้ลึกซึ้งยิ่งขึ้น

สรุป

class syntax ใน JavaScript ช่วยให้การเขียน Object-Oriented Programming ง่ายขึ้นและใกล้เคียงกับภาษา OOP อื่นๆ มากยิ่งขึ้น เราได้เรียนรู้เกี่ยวกับ class keyword, constructor method, และการสืบทอดคุณสมบัติโดยใช้ extends keyword การใช้ class syntax ช่วยให้โค้ดของเราเป็นระเบียบและง่ายต่อการบำรุงรักษามากยิ่งขึ้น ในบทถัดไป เราจะเจาะลึกเรื่อง Static Methods and Properties ซึ่งเป็นอีกหนึ่งคุณสมบัติที่สำคัญของ class ใน JavaScript