ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends
ทำความรู้จักไวยากรณ์คลาสอย่างค่อยเป็นค่อยไป: constructor เมธอดของอินสแตนซ์ ตัวช่วย static และการสืบทอดอย่างง่ายด้วย extends
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 2 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 2 บทเรียน
รู้จักรูปแบบคลาส
เป้าหมาย: ดูว่ารูปแบบคลาสเชื่อมโยงกับโพรโทไทป์อย่างไร
- ตัวสร้างสำหรับการตั้งค่า
- เมธอดในโพรโทไทป์
- ตัวช่วยแบบสแตติกในคลาส
- การสืบทอดสำหรับการสืบทอดอย่างง่าย

ตัวสร้างและเมธอด
ตัวสร้างจะทำงานเมื่อใช้ ใหม่ เมธอดในเนื้อหาคลาสจะใช้ร่วมกันโดยทุกอินสแตนซ์ผ่านโพรโทไทป์
// Class with a constructor and an instance method
class Counter {
constructor(start = 0) {
// Initialize fields
this.value = start;
}
// Instance method (lives on the prototype)
inc() {
this.value = this.value + 1;
console.log("Now:", this.value);
}
}
const c = new Counter(1);
c.inc();
c.inc();

การใช้โพรโทไทป์ร่วมกัน
เมธอดของอินสแตนซ์ในรูปแบบคลาสคือเมธอดของโพรโทไทป์ ดังนั้นฟังก์ชันเดียวกันจึงถูกนำกลับมาใช้ซ้ำ
// Prototype sharing demo
class Greeter {
say(name) {
console.log("Hello,", name);
}
}
const g1 = new Greeter();
const g2 = new Greeter();
// Same function reference for both instances
console.log("Same method?", g1.say === g2.say);

พื้นฐานเมธอดแบบสแตติก
เมธอดแบบสแตติกจะถูกเรียกใช้บนคลาสโดยตรง ไม่ใช่บนอินสแตนซ์
// Static method: lives on the class, not instances
class MathBox {
static double(n) {
return n * 2;
}
}
console.log("Static call:", MathBox.double(4));
const m = new MathBox();
// @ts-ignore (conceptually): next line would be undefined in JS
console.log("Instance has static?", typeof m.double);

การสืบทอดอย่างง่าย
// Inheritance with extends and super
class Animal {
speak() {
console.log("...");
}
}
class Dog extends Animal {
speak() {
// Optionally call parent method
super.speak();
console.log("Woof");
}
}
const d = new Dog();
d.speak();

เคล็ดลับสำหรับคลาส
เคล็ดลับ:
- ทำคลาสให้เล็ก: มีฟิลด์และเมธอดสักสองสามรายการ
- เลือกใช้เมธอดของอินสแตนซ์ในเนื้อหาคลาส เพราะใช้ร่วมกันผ่านโพรโทไทป์
- ใช้ แบบสแตติก สำหรับตัวช่วยบริสุทธิ์ที่ไม่ผูกกับอินสแตนซ์

แบบทดสอบตำแหน่งเมธอดในคลาส
ตรวจสอบอย่างรวดเร็ว: ตำแหน่งของเมธอดที่ใช้ร่วมกัน

ทบทวน
ทบทวน: คุณสร้างคลาสที่มีตัวสร้าง เขียนเมธอดของอินสแตนซ์ที่ใช้ร่วมกัน เพิ่มตัวช่วยแบบสแตติก และขยายคลาสพื้นฐานด้วย คลาสแม่

คำถามที่พบบ่อย
บทเรียน “ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 2 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends”
ทำความรู้จักไวยากรณ์คลาสอย่างค่อยเป็นค่อยไป: constructor เมธอดของอินสแตนซ์ ตัวช่วย static และการสืบทอดอย่างง่ายด้วย extends คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 2 บทเรียน
บทเรียน “ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง
- ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends