การใช้งาน Class and object ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

สวัสดีครับทุกท่าน! วันนี้เราจะมาพูดกันเรื่องการใช้งานคลาส (Class) และอ็อบเจกต์ (Object) ในภาษา JavaScript ในแบบที่จะทำให้คุณเข้าใจง่ายอย่างไม่น่าเชื่อ เราจะไปดูกันว่าคลาสและอ็อบเจกต์คืออะไร, วิธีการใช้งาน, ตัวอย่างโค้ด 3 ตัวอย่าง, การทำงานของมัน และยกตัวอย่าง use case ในโลกจริงที่คุณอาจพบเห็นได้ทุกวัน เราจะเสร็จสิ้นจากบทความนี้ด้วยความรู้ที่เพียบพร้อม และหวังว่าคุณจะได้รับแรงบันดาลใจที่จะศึกษาเรื่องการเขียนโปรแกรมต่อไปกับ EPT หรือ Expert-Programming-Tutor!

คลาส (Class) คืออะไร?

ใน JavaScript, คลาสเป็นโครงสร้างหลักที่ใช้สำหรับการสร้างอ็อบเจกต์ที่มีลักษณะและฟังก์ชันที่คล้ายคลึงกัน มันคือรูปแบบหรือแม่แบบที่ช่วยให้เราสร้างอ็อบเจกต์โดยอิงจากโครงสร้างเดียวกันได้หลาย ๆ ตัว

อ็อบเจกต์ (Object) คืออะไร?

อ็อบเจกต์จะเกิดขึ้นเมื่อเราใช้คลาสเป็นโครงสร้างในการสร้างข้อมูลออกมา อ็อบเจกต์คือตัวอย่างของคลาสที่ถูกสร้างขึ้นมา เราสามารถมีอ็อบเจกต์หลายตัวจากคลาสเดียวกัน แต่ถูกกำหนดค่าที่แตกต่างกันได้

หลักการของการใช้งานคลาสและอ็อบเจกต์

เพื่อเข้าใจอย่างชัดเจน เรามาดูตัวอย่างโค้ด JavaScript ง่ายๆ กันครับ

ตัวอย่างโค้ดที่ 1: การสร้างคลาสและการใช้งานอ็อบเจกต์

 class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.brand} ${this.model}.`);
  }
}

// การใช้งาน
const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // This car is a Toyota Corolla.

ในตัวอย่างนี้เราสร้างคลาส `Car` ที่มีการสร้างอ็อบเจกต์โดยใช้ keyword ว่า `new` และเราก็สามารถเรียกใช้ method `displayInfo` เพื่อแสดงข้อมูลของรถ

ตัวอย่างโค้ดที่ 2: การสืบทอดคุณสมบัติ (Inheritance)

 class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  honk() {
    console.log('Beep beep!');
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }

  displayInfo() {
    console.log(`This vehicle is a ${this.brand} ${this.model}.`);
  }
}

// การใช้งาน
const myCar = new Car('Honda', 'Civic');
myCar.displayInfo(); // This vehicle is a Honda Civic.
myCar.honk();        // Beep beep!

ในตัวอย่างนี้ `Car` เป็น subclass ที่รับคุณสมบัติมาจาก `Vehicle` โดยใช้การสืบทอด ซึ่งทำให้ `Car` สามารถใช้ method `.honk()` ได้

ตัวอย่างโค้ดที่ 3: คลาสและ method แบบ static

 class Calculator {
  static add(x, y) {
    return x + y;
  }

  static subtract(x, y) {
    return x - y;
  }
}

// การใช้งานโดยไม่ต้องสร้างอ็อบเจกต์ขึ้นมา
console.log(Calculator.add(5, 3));        // 8
console.log(Calculator.subtract(5, 3));   // 2

Method แบบ static ของคลาสสามารถเรียกใช้งานได้โดยตรงโดยไม่ต้องสร้าง instance หรืออ็อบเจกต์ขึ้นมาก่อน

Usecase ในโลกจริง: เว็บแอปพลิเคชัน

ลองนึกเกี่ยวกับระบบจัดการสินค้าในสต็อก คุณสามารถสร้างคลาส `Product` และมี attributes ต่างๆ เช่น `name`, `price`, `quantity` และ methods สำหรับการจัดการสินค้าเหล่านั้น เช่น `addStock`, `removeStock` และ `updatePrice`.

การทำความเข้าใจในแนวคิดของคลาสและอ็อบเจกต์ใน JavaScript ไม่เพียงแต่ช่วยให้โค้ดของคุณเป็นระเบียบและง่ายต่อการบำรุงรักษาเท่านั้น แต่ยังเป็นการฝึกคุณให้เข้าใจหลักการ OOP (Object-Oriented Programming) ซึ่งเป็นแนวทางที่ใช้กันอย่างแพร่หลายในการเขียนโปรแกรม

หากคุณพบว่าบทความนี้มีประโยชน์และต้องการเรียนรู้การเขียนโปรแกรมในระดับที่ลึกซึ้งยิ่งขึ้น อย่าลืมสำรวจหลักสูตรที่น่าตื่นเต้นของเราที่ EPT เรามีหลักสูตรที่หลากหลาย ไม่ว่าจะเป็นสำหรับมือใหม่หรือผู้เชี่ยวชาญ ที่เตรียมจะช่วยคุณสัมผัสกับศาสตร์แห่งการเขียนโปรแกรมได้อย่างเต็มที่!

หลังจากที่ได้เรียนรู้พื้นฐานของคลาสและอ็อบเจกต์, คุณอาจเริ่มต้นจากการสร้างโครงการเล็กๆ แต่ถ้าคุณอยากเติบโตในเส้นทางนี้ การเข้าร่วมกับชั้นเรียนในการเขียนโปรแกรมย่อมเป็นหนทางที่ยอดเยี่ยมในการขยายขอบเขตความรู้และประสบการณ์ของคุณ ที่ EPT คุณจะได้พบกับทั้งบทเรียนที่น่าสนใจ, การแก้ปัญหาเชิงลึก, และแน่นอนว่าเราจะอยู่เคียงข้างคุณในทุกขั้นตอนของการพัฒนาทักษะการเขียนโปรแกรมของคุณ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง