Class ใน JavaScript (ES6) - การใช้ super() ใน Class

# Class ใน JavaScript (ES6) - การใช้ `super()` ใน Class

การพัฒนาโปรแกรมด้วยภาษา JavaScript ได้มีวิวัฒนาการมาอย่างมากมาย โดยเฉพาะกับการเปิดตัว ECMAScript 6 (หรือที่เรียกว่า ES6) ซึ่งได้นำเสนอความสามารถใหม่ ๆ ที่ทำให้นักพัฒนาสะดวกในการเขียนโค้ดมากขึ้น หนึ่งในความสามารถที่สำคัญใน ES6 ก็คือ "Class"

Class ใน ES6 ช่วยให้นักพัฒนาสามารถจัดการโค้ดที่มีความซับซ้อนได้ง่ายขึ้นผ่านการนำเสนอแนวคิดเชิงวัตถุ (Object-Oriented Programming) ซึ่งซอฟต์แวร์ที่มีความซับซ้อนสูงพัฒนาด้วยแนวคิดนี้มักมีประสิทธิภาพและง่ายต่อการดูแลรักษา ในบทความนี้ เราจะมาดูการใช้งานของ `super()` ในคลาสของ JavaScript เพื่อเจาะลึกถึงความสำคัญและการประยุกต์ใช้

ความเข้าใจพื้นฐานของ Class ใน JavaScript

ก่อนอื่นเรามาทำความเข้าใจกันก่อนว่า class คืออะไร Class คือแบบแผนหรือแบบจำลอง (Blueprint) ที่อนุญาตให้คุณสร้างออบเจ็กต์ และมีส่วนประกอบที่สำคัญคือ constructor ซึ่งเป็นฟังก์ชันที่เรียกใช้เมื่อมีการสร้างออบเจ็กต์ใหม่

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

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

ในตัวอย่างด้านบน เราได้สร้าง class ชื่อ `Animal` ที่มี constructor รับพารามิเตอร์ `name` และฟังก์ชัน `speak` ที่แสดงข้อความ

การสืบทอด (Inheritance) ด้วย Class

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // เรียกใช้superเพื่อเรียกconstructorของคลาสพ่อแม่
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

ในตัวอย่างด้านบน คลาส `Dog` ได้สืบทอดจากคลาส `Animal` โดยที่ `Dog` จะมีฟังก์ชันและคุณสมบัติจาก `Animal` มาใช้ได้ `constructor` ของ `Dog` ยังสามารถเพิ่มคุณสมบัติพิเศษเช่น `breed` ได้อีกด้วย

ทำความรู้จักกับ `super()`

ฟังก์ชัน `super()` ใน JavaScript ใช้เพื่อเรียกใช้ฟังก์ชันของคลาสพ่อแม่ (superclass) จากบรรทัดที่คุณต้องการ สามารถเรียกใช้ได้ทั้งในตัวสร้าง (constructor) และฟังก์ชันอื่น ๆ ที่เกิดจากการสืบทอด

การใช้ `super()` ใน constructor

เมื่อคุณใช้คลาสที่สืบทอดจากคลาสอื่น จำเป็นต้องเรียก `super()` ใน constructor ก่อนที่จะใช้งาน `this` นั่นหมายความว่า `super()` จะเริ่มกระบวนการของการกำหนดค่าเบื้องต้นตามคลาสพ่อแม่ก่อนที่ค่าอื่น ๆ จะถูกกำหนดในคลาสลูก

constructor(name, breed) {
  super(name); // เพิ่มค่า 'name' จาก Animal
  this.breed = breed;
}

การใช้ `super` ในฟังก์ชันอื่น

ไม่เพียงแต่ `constructor` เท่านั้น คุณยังสามารถใช้ `super.` เพื่อเรียกใช้ฟังก์ชันของคลาสพ่อแม่ในฟังก์ชันที่อยู่ภายในคลาสลูกได้

speak() {
  super.speak(); // เรียกใช้ฟังก์ชัน 'speak' ของ Animal
  console.log(`${this.name} the ${this.breed} barks.`);
}

ในตัวอย่างข้างต้น `super.speak()` ถูกใช้เพื่อเรียกฟังก์ชัน `speak` จากคลาส `Animal` ซึ่งสามารถใส่ตรรกะเพิ่มเติมภายในฟังก์ชัน `speak` ของ `Dog` ได้

กรณีการใช้งาน (Usecase) ของ `Class` และ `super()` ใน JavaScript

การสืบทอดคุณสมบัติผ่าน `class` และ `super()` เหมาะสำหรับการออกแบบโปรแกรมที่ต้องการแยกแยะหน้าที่หรือความรับผิดชอบของโค้ด โดยในบริบทของโปรแกรมประยุกต์ต่าง ๆ เหล่านี้:

ด้วยความสามารถพิเศษของ `super()` ในการใช้และขยายฟังก์ชันจากคลาสพ่อแม่ ทำให้การพัฒนาซอฟต์แวร์และโปรเจคต่าง ๆ มีความยืดหยุ่นและสะดวกขึ้น

สรุป

การใช้ `class` และ `super()` ใน JavaScript ES6 ช่วยให้นักพัฒนาสามารถจัดการและขยายโค้ดได้ง่ายขึ้นและมีประสิทธิภาพมากขึ้น การเข้าใจการสืบทอดและการใช้ `super()` เป็นวิธีที่สำคัญในการออกแบบซอฟต์แวร์ที่มีความซับซ้อน ซึ่งช่วยให้การจัดการและการปรับเปลี่ยนซอฟต์แวร์สามารถทำได้ง่ายและมีความยืดหยุ่น

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเทคนิคเหล่านี้และทักษะการเขียนโปรแกรมอื่น ๆ EPT (Expert-Programming-Tutor) พร้อมเสมอที่จะนำเสนอหลักสูตรการเรียนรู้ที่ครอบคลุมและเหมาะสมกับทุกระดับของความชำนาญของคุณในเส้นทางการเขียนโปรแกรม

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/