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

ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends

ทำความรู้จักไวยากรณ์คลาสอย่างค่อยเป็นค่อยไป: constructor เมธอดของอินสแตนซ์ ตัวช่วย static และการสืบทอดอย่างง่ายด้วย extends

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

รู้จักรูปแบบคลาส

เป้าหมาย: ดูว่ารูปแบบคลาสเชื่อมโยงกับโพรโทไทป์อย่างไร

  • ตัวสร้างสำหรับการตั้งค่า
  • เมธอดในโพรโทไทป์
  • ตัวช่วยแบบสแตติกในคลาส
  • การสืบทอดสำหรับการสืบทอดอย่างง่าย
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 1

ตัวสร้างและเมธอด

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

// 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();
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 2

การใช้โพรโทไทป์ร่วมกัน

เมธอดของอินสแตนซ์ในรูปแบบคลาสคือเมธอดของโพรโทไทป์ ดังนั้นฟังก์ชันเดียวกันจึงถูกนำกลับมาใช้ซ้ำ

// 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);
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 3

พื้นฐานเมธอดแบบสแตติก

เมธอดแบบสแตติกจะถูกเรียกใช้บนคลาสโดยตรง ไม่ใช่บนอินสแตนซ์

// 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);
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 4

การสืบทอดอย่างง่าย

การสืบทอดจะเตรียมสายโพรโทไทป์ให้ ใช้ คลาสแม่เพื่อเรียกเมธอดของคลาสแม่

// 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 — ภาพประกอบ 5

เคล็ดลับสำหรับคลาส

เคล็ดลับ:

  • ทำคลาสให้เล็ก: มีฟิลด์และเมธอดสักสองสามรายการ
  • เลือกใช้เมธอดของอินสแตนซ์ในเนื้อหาคลาส เพราะใช้ร่วมกันผ่านโพรโทไทป์
  • ใช้ แบบสแตติก สำหรับตัวช่วยบริสุทธิ์ที่ไม่ผูกกับอินสแตนซ์
ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 6

แบบทดสอบตำแหน่งเมธอดในคลาส

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

ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 7

ทบทวน

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

ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends — ภาพประกอบ 8

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

บทเรียน “ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. พื้นฐานสายโซ่ต้นแบบและพร็อพเพอร์ตีของออบเจ็กต์เอง
  2. ไวยากรณ์คลาส (ตัวอย่างเบื้องต้น): constructor, เมธอด, static, extends
← กลับไปที่ JavaScript Academy