การสืบทอด 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

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.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"

เลือก 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);

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(...) เป็นอันดับแรกในตัวสร้างของคลาสย่อย
- เขียนทับเฉพาะสิ่งที่จำเป็น และใช้ซ้ำด้วย super.method()
- เลือกใช้ composition สำหรับยูทิลิตีและคุณลักษณะที่ใช้ร่วมกันหลายส่วน

แบบทดสอบพื้นฐานของ super(...)
ตรวจสอบอย่างรวดเร็ว: super ในตัวสร้างของคลาสย่อย

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

คำถามที่พบบ่อย
บทเรียน “การสืบทอด 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static
- การสืบทอด super และเมื่อใดควรเลือกการประกอบ
- มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก