พื้นฐาน OOP ใน JavaScript

---

1. OOP คืออะไร

OOP = การเขียนโปรแกรมเชิงวัตถุ
แนวคิดหลักคือ "มองทุกอย่างเป็นวัตถุ"

วัตถุ (Object) = สิ่งที่มี

• คุณสมบัติ (Properties)

• พฤติกรรม (Methods)

ตัวอย่างของวัตถุในชีวิตจริง:
รถยนต์ = { สี, ยี่ห้อ, วิ่ง, เบรก }

---

2. ทำไมต้องใช้ OOP

• แยกส่วนโค้ดให้เป็นระเบียบ

• ใช้งานซ้ำได้ง่าย

• ดูแลรักษาง่าย (Maintainable)

• ขยายระบบได้สะดวก

---

3. สร้าง Object แบบพื้นฐานใน JavaScript

3.1 Object Literal

javascript

let person = {
  name: "มิว",
  age: 25,
  greet: function() {
    console.log("สวัสดี! ฉันชื่อ " + this.name);
  }
};

person.greet();

ข้อจำกัด: ถ้าต้องสร้างหลาย object แบบนี้ ต้องเขียนซ้ำเยอะ

---

4. สร้าง Object แบบ OOP ด้วย Constructor Function (แบบเก่า)

javascript

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("สวัสดี! ฉันชื่อ " + this.name);
  }
}

let p1 = new Person("มิว", 25);
p1.greet();

ข้อสังเกต: คำสั่ง new ใช้สร้าง object ใหม่จากแบบแผน

---

5. สร้าง Object แบบ OOP ด้วย Class (แบบใหม่)

ตั้งแต่ ES6 เราสามารถใช้ class ได้ (เขียนง่ายขึ้น)

javascript

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("สวัสดี! ฉันชื่อ " + this.name);
  }
}

let p1 = new Person("มิว", 25);
p1.greet();

constructor() = ฟังก์ชันที่ทำงานทันทีเมื่อสร้าง object

---

6. การสืบทอดคลาส (Inheritance)

ให้คลาสลูกสามารถใช้คุณสมบัติของคลาสแม่

javascript

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

  speak() {
    console.log(this.name + " ส่งเสียง");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " เห่า");
  }
}

let dog = new Dog("บ๊อบบี้");
dog.speak();

• extends คือการสืบทอด

• ถ้าไม่เขียน speak() ใหม่ จะใช้ของคลาสแม่

---

7. การใช้ super()

เวลาเขียน constructor ในคลาสลูก ต้องเรียก super() ก่อน

javascript

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

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

  info() {
    console.log(this.name + " เป็นพันธุ์ " + this.breed);
  }
}

let dog = new Dog("บ๊อบบี้", "ชิวาวา");
dog.info();

---

8. หลัก 4 ข้อสำคัญของ OOP

• Encapsulation (การซ่อนรายละเอียด)

• Abstraction (การซ่อนความซับซ้อน)

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

• Polymorphism (การเขียนฟังก์ชันชื่อเหมือนแต่ทำงานต่างกัน)

ใน JavaScript สามารถทำได้ทั้ง 4 แบบ แม้จะยืดหยุ่นกว่า OOP ของภาษาอื่นนิดหน่อย

---

9. Private Fields (ตั้งแต่ ES2022)

ซ่อน property จากภายนอกด้วย #

javascript

class Account {
  #balance = 0;

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

let acc = new Account();
acc.deposit(1000);
console.log(acc.getBalance()); // 1000

---

10. ตัวอย่าง OOP แบบรวมทั้งหมด

javascript

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log("สวัสดี! ฉันชื่อ " + this.name);
  }
}

class Student extends Person {
  constructor(name, age, studentId) {
    super(name, age);
    this.studentId = studentId;
  }

  study() {
    console.log(this.name + " กำลังเรียน");
  }
}

let s1 = new Student("มิว", 25, "S001");
s1.introduce();
s1.study();

---

สรุปง่ายๆ อีกครั้ง

• class = แบบแผนของ object

• constructor() = สร้าง object

• extends = สืบทอดคุณสมบัติ

• super() = เรียก constructor ของแม่

• # = private property