บทนำสู่คลาสและอ็อบเจ็กต์ใน JavaScript

ตอนนี้เราจะมาศึกษาเกี่ยวกับ OOP ใน JavaScript กัน ลองพิจารณาตัวอย่างจากชีวิตจริงก่อน แล้วจึงนำมาเทียบกับใน JavaScript

ตัวอย่างเช่น รถยนต์ มี ล้อ, สี, ประเภทรถยนต์, ความจุเครื่องยนต์ และอื่นๆ นอกจากนั้น คนขับ ยังสามารถสั่งคำสั่งได้: เดินหน้า, หยุด, เลี้ยวขวา, เลี้ยวซ้าย เป็นต้น

เราสามารถพูดได้ว่า มี คลาส ของรถยนต์ ที่มีคุณสมบัติร่วมกัน (ทุกคันมีล้อและทุกคัน สามารถรับคำสั่งได้)

รถยนต์คันหนึ่งที่จอดอยู่บนถนน - คือตัวแทนของคลาสนี้ หรือที่เรียกอีกอย่างว่า อ็อบเจ็กต์ ของคลาสนี้ อ็อบเจ็กต์ทั้งหมด ของคลาสนี้มี คุณสมบัติ: จำนวนล้อ, สี, ประเภทรถยนต์ และมี เมธอด: เดินหน้า, หยุด, เลี้ยวขวา, เลี้ยวซ้าย

กล่าวคือ คลาสเองนั้นคือแบบแปลน ที่โรงงานใช้ผลิตรถยนต์ ส่วนอ็อบเจ็กต์ คือตัวรถยนต์ที่ผลิตตามแบบแปลนนั้น

ใน JavaScript คลาสถูกสร้างขึ้นด้วยคีย์เวิร์ด class ตามด้วยชื่อของคลาสนั้น ลองสร้างคลาส Car กัน:

javascriptclass Car {
  // ใส่โค้ดที่นี่ นั่นคือแบบแปลนรถยนต์ใน JavaScript
}

ตอนนี้เราจะระบุในแบบแปลนของเราว่ารถยนต์คันใดๆ ที่สร้างจากแบบแปลนนี้จะมี คุณสมบัติสำหรับสีและคุณสมบัติสำหรับปริมาณน้ำมัน

เพื่อการนี้ ภายในคลาสให้เขียนคุณสมบัติ color และคุณสมบัติ fuel:

javascriptclass Car {
  color; // สีของรถยนต์
  fuel;  // ปริมาณน้ำมันเชื้อเพลิง
}

ตอนนี้มาสร้างเมธอดของคลาสของเรา ใน JavaScript เมธอดมีความคล้ายคลึงกับฟังก์ชันทั่วไป เพียงแต่ประกาศโดยไม่มีคีย์เวิร์ด function

ดังที่ได้กล่าวไว้ข้างต้น รถยนต์ของเรา สามารถเดินหน้า, สามารถเลี้ยว, สามารถหยุดได้ มาสร้างเมธอดที่สอดคล้องกันในคลาสของเรา:

javascriptclass Car {
  color; // สีของรถยนต์
  fuel;  // ปริมาณน้ำมันเชื้อเพลิง
  
  // คำสั่งเดินหน้า:
  go() {
    // โค้ด JavaScript บางส่วน
  }
  
  // คำสั่งเลี้ยว:
  turn() {
    // โค้ด JavaScript บางส่วน
  }
  
  // คำสั่งหยุด:
  stop() {
    // โค้ด JavaScript บางส่วน
  }
}

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

ใน JavaScript สิ่งนี้ทำได้ด้วยคีย์เวิร์ด new ตามด้วยชื่อคลาส:

javascriptnew Car; // สั่งโรงงานให้สร้างรถยนต์

อย่างไรก็ตาม หากเพียงแค่สร้างอ็อบเจ็กต์ของคลาส - จะไม่เกิดผลใดๆ (นี่เหมือนกับการ ประกาศอาร์เรย์แล้วไม่ได้เก็บมันไว้ที่ไหน) เราต้องการตัวแปรสำหรับ เก็บอ็อบเจ็กต์นี้

ให้ตัวแปรนี้ชื่อว่า myCar - เก็บอ็อบเจ็กต์ที่เราสร้างไว้ในตัวแปรนี้:

javascriptlet myCar = new Car;

หลังจากการสร้างรถยนต์เสร็จสิ้น เราสามารถอ้างอิงถึง คุณสมบัติของมันได้ การอ้างอิงถึงคุณสมบัติเกิดขึ้น ผ่านจุด ลองกำหนด คุณสมบัติของอ็อบเจ็กต์ของเรา:

javascriptlet myCar = new Car; // สั่งโรงงานให้สร้างรถยนต์

myCar.color = 'red'; // ทาสีแดง
myCar.fuel = 50;     // เติมน้ำมันเชื้อเพลิง

ทั้งหมดนี้ รถยนต์ของเราถูกสร้าง ทาสี และเติมน้ำมันแล้ว ตอนนี้เราสามารถสั่งคำสั่งได้ผ่าน เมธอดของรถยนต์คันนี้

การอ้างอิงถึงเมธอดก็เกิดขึ้นผ่าน จุดเช่นกัน แต่ ต่างจากคุณสมบัติคือหลังจาก ชื่อเมธอดต้องใส่วงเล็บ มาสั่งคำสั่งให้อ็อบเจ็กต์ของเรากัน:

javascriptmyCar.go();
myCar.turn();
myCar.stop();