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

ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static

สร้างคลาสด้วยฟิลด์สาธารณะ ซ่อนข้อมูลด้วยฟิลด์ส่วนตัว # และเพิ่มพร็อพเพอร์ตีหรือเมธอด static

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

เหตุใดจึงใช้คลาส

เป้าหมาย: สร้างคลาสขนาดเล็กที่ชัดเจน

  • ฟิลด์และเมธอดสาธารณะ
  • ฟิลด์ #private สำหรับสถานะที่ซ่อนอยู่
  • คุณสมบัติและเมธอด static สำหรับตัวช่วยระดับคลาส
  • ทำให้ตัวอย่างมีขนาดเล็กและอ่านง่าย
ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 1

ฟิลด์สาธารณะและตัวสร้าง

สร้างคลาสที่มี ฟิลด์สาธารณะและเมธอดขนาดเล็ก โดยรักษาตรรกะให้เรียบง่ายสำหรับผู้เริ่มต้น

// Public fields and a simple method
class Counter {
  // public field with default
  value = 0;

  constructor(start) {
    // use a default if start is not provided
    this.value = Number.isFinite(start) ? start : 0;
  }

  inc() {
    this.value = this.value + 1;
  }
}

const c1 = new Counter(2);
c1.inc();
console.log("value:", c1.value); // 3
ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 2

ฟิลด์ #private

ฟิลด์ #private ถูกบังคับใช้โดยภาษา และใช้งานได้เฉพาะภายในเนื้อหาของคลาสเท่านั้น หากจำเป็น ให้เปิดเผยเมธอดสำหรับอ่านค่า

// Private # fields hide internal state
class SafeCounter {
  // private field (only inside the class)
  #value = 0;

  constructor(start) {
    this.#value = Number.isFinite(start) ? start : 0;
  }

  inc() { this.#value = this.#value + 1; }
  getValue() { return this.#value; } // expose via method
}

const sc = new SafeCounter(5);
sc.inc();
console.log("safe value:", sc.getValue());

// External access fails (uncommenting the next line would throw):
// console.log(sc.#value);
ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 3

ตัวอ่านค่าสำหรับการอ่านอย่างปลอดภัย

getter สามารถคืนค่าที่คำนวณหรือผ่านการตรวจสอบแล้ว โดยยังคงเก็บฟิลด์ไว้เป็นส่วนตัว

// Getters provide read-only views; simple guard logic
class User {
  #name = "Anonymous";
  constructor(name) {
    if (typeof name === "string" && name.trim().length > 0) {
      this.#name = name.trim();
    }
  }
  get name() {
    return this.#name;
  }
}

const u = new User(" Ayla ");
console.log("name:", u.name);
ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 4

สมาชิก static

สมาชิก static จะเรียกใช้ผ่านคลาส (เช่น MathHelp.circleArea()) ไม่ใช่ผ่านอินสแตนซ์

// Static = belongs to the class, not to instances
class MathHelp {
  static PI = 3.14159;
  static circleArea(r) {
    if (!(typeof r === "number" && r >= 0)) return 0;
    return MathHelp.PI * r * r;
  }
}

console.log("PI:", MathHelp.PI);
console.log("area r=2:", MathHelp.circleArea(2));

// Instances do not have the static members:
const mh = new MathHelp();
console.log("instance has PI?", "PI" in mh); // false
ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 5

แนวปฏิบัติที่เหมาะกับผู้เริ่มต้น

เคล็ดลับ:

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

แบบทดสอบพื้นฐานของฟิลด์ส่วนตัว

ตรวจสอบอย่างรวดเร็ว: ฟิลด์ #private

ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 7

ทบทวน

ทบทวน: ใช้ฟิลด์สาธารณะสำหรับสถานะง่าย ๆ ใช้ #private เพื่อซ่อนรายละเอียดภายใน และใช้ static สำหรับตัวช่วยระดับคลาส ทำให้แต่ละคลาสมีขนาดเล็กและอ่านง่าย

ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static — ภาพประกอบ 8

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

บทเรียน “ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static”

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

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

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

บทเรียน “ฟิลด์ของคลาส ฟิลด์ส่วนตัว # และสมาชิก static” ใช้เวลานานแค่ไหน

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

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

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

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

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