0Pricing
JavaScript Academy · บทเรียน

การสืบทอด super และเมื่อใดควรเลือกการประกอบ

ขยายคลาสพื้นฐานด้วย extends เรียกใช้ super ในคอนสตรักเตอร์ เขียนทับเมธอดอย่างปลอดภัย และรู้ว่าเมื่อใดการประกอบอย่างง่ายเหมาะกว่า

การสืบทอด super และเมื่อใดควรเลือกการประกอบ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

ภาพรวม

เป้าหมาย: ใช้การสืบทอดพื้นฐานโดยไม่ทำให้สับสน

  • extends ใช้สร้างคลาสลูก
  • super(...) เรียกตัวสร้างของคลาสแม่
  • เขียนทับเมธอด และอาจเรียก super.method() ได้
  • หากไม่ใช่ความสัมพันธ์แบบ “is-a” ให้เลือกใช้ composition
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 1

extends และ super

สร้างคลาสลูกด้วย extends และเรียก super(name) เพื่อเรียกตัวสร้างของคลาสแม่และเตรียมค่า this

// Base class with a small field and method
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return "Animal:" + this.name;
  }
}

// Child class extends the base and calls super(...)
class Dog extends Animal {
  constructor(name, breed) {
    // must call super() before using this
    super(name);
    this.breed = breed;
  }
  speak() {
    return "woof";
  }
}

const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 2

การเขียนทับเมธอด

เมื่อเขียนทับเมธอด คุณสามารถเรียก super.method() เพื่อใช้ตรรกะของคลาสพื้นฐานซ้ำ แล้วจึงเพิ่มการปรับแก้ของคุณ

// Override a method; keep parent behavior with super.method()
class Button {
  click() {
    return "base-click";
  }
}

class IconButton extends Button {
  click() {
    // call parent behavior, then add something
    const base = super.click();
    return base + "+icon";
  }
}

const b = new IconButton();
console.log(b.click()); // "base-click+icon"
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 3

เลือก composition เมื่อเป็นความสัมพันธ์แบบ has-a

หากความสัมพันธ์เป็นแบบ has-a (ใช้ตัวช่วย) ให้เลือก composition แทนการสืบทอด เพื่อให้คลาสเรียบง่าย

// Composition: use a helper object instead of extending
class Logger {
  log(msg) {
    console.log("[log]", msg);
  }
}

class Player {
  constructor(name, logger) {
    this.name = name;
    this.logger = logger; // has-a logger
  }
  score(points) {
    this.logger.log(this.name + " +" + points);
  }
}

const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 4

is-a กับ has-a

การสืบทอดจำลองความสัมพันธ์แบบ is-a: Dog เป็น Animal ส่วน composition ใช้สำหรับตัวช่วยแบบ has-a

// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 5

แนวปฏิบัติสำหรับผู้เริ่มต้น

เคล็ดลับ:

  • รักษาลำดับชั้นให้ ตื้น สำหรับผู้เริ่มต้น
  • เรียก super(...) เป็นอันดับแรกในตัวสร้างของคลาสย่อย
  • เขียนทับเฉพาะสิ่งที่จำเป็น และใช้ซ้ำด้วย super.method()
  • เลือกใช้ composition สำหรับยูทิลิตีและคุณลักษณะที่ใช้ร่วมกันหลายส่วน
การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 6

แบบทดสอบพื้นฐานของ super(...)

ตรวจสอบอย่างรวดเร็ว: super ในตัวสร้างของคลาสย่อย

การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 7

ทบทวน

ทบทวน: ใช้ extends สำหรับความสัมพันธ์แบบ is-a ที่แท้จริง เรียก super(...) ตั้งแต่ต้น เขียนทับอย่างระมัดระวัง (เรียก super.method() เมื่อเป็นประโยชน์) และเลือกใช้ composition สำหรับตัวช่วย

การสืบทอด super และเมื่อใดควรเลือกการประกอบ — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “การสืบทอด super และเมื่อใดควรเลือกการประกอบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสืบทอด super และเมื่อใดควรเลือกการประกอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสืบทอด super และเมื่อใดควรเลือกการประกอบ”

ขยายคลาสพื้นฐานด้วย extends เรียกใช้ super ในคอนสตรักเตอร์ เขียนทับเมธอดอย่างปลอดภัย และรู้ว่าเมื่อใดการประกอบอย่างง่ายเหมาะกว่า คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “การสืบทอด super และเมื่อใดควรเลือกการประกอบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static
  2. การสืบทอด super และเมื่อใดควรเลือกการประกอบ
  3. มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก
← กลับไปที่ JavaScript Academy