JavaScript Academy · บทเรียน

มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก

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

บทเรียน 3 จาก 38 ขั้นตอน

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

เหตุใดจึงใช้มิกซ์อิน (ตามความเหมาะสม)

เป้าหมาย: แบ่งปันความสามารถขนาดเล็กโดยไม่สร้างลำดับชั้นที่ลึก

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

สร้างมิกซ์อิน

มิกซ์อิน คือออบเจ็กต์ที่มีเมธอดสำหรับแบ่งปันระหว่างชนิดต่าง ๆ

// A simple mixin: adds timestamp helpers
const timeMixin = {
  setCreatedNow: function () {
    this.createdAt = new Date(0); // fixed for demo output
  },
  ageMs: function () {
    if (!this.createdAt) return 0;
    return 1234; // fixed number for a stable demo
  }
};

console.log("mixin keys:", Object.keys(timeMixin));
มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 2

มิกซ์อินผ่านต้นแบบ

คัดลอกเมธอดของมิกซ์อินไปยัง Class.prototype เพื่อให้อินสแตนซ์ทุกตัวมีความสามารถนั้น

// Apply the mixin to all instances via the prototype
class Note {
  constructor(text) {
    this.text = text;
  }
}

// Copy methods to the prototype so every instance can use them
Object.assign(Note.prototype, timeMixin);

const n = new Note("hello");
n.setCreatedNow();
console.log("ageMs:", n.ageMs());
มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 3

มิกซ์อินสำหรับอินสแตนซ์เดียว

ใช้ Object.assign(obj, mixin) เพื่อเพิ่มความสามารถให้ออบเจ็กต์เดียวโดยไม่แก้ไขคลาส

// You can also mix into just one instance
const single = { name: "one" };
Object.assign(single, timeMixin);
single.setCreatedNow();
console.log("single ageMs:", single.ageMs());
มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 4

ฟังก์ชันสร้างกับมิกซ์อิน

ฟังก์ชันสร้างขนาดเล็กสามารถสร้างออบเจ็กต์พื้นฐานก่อน แล้วจึงผสมพฤติกรรมเพิ่มเติมเข้าไป

// Factory + mixin: build an object then add abilities
function makeUser(name) {
  return { name: name };
}

const u = makeUser("Ayla");
Object.assign(u, timeMixin);
u.setCreatedNow();
console.log("user ageMs:", u.ageMs());
มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 5

แนวปฏิบัติที่ดี

เคล็ดลับ:

  • ทำให้มิกซ์อินมีขนาด เล็กและมุ่งเน้น (มีเมธอด 2–3 เมธอด)
  • หลีกเลี่ยงชื่อซ้ำกัน และเลือกชื่อเมธอดที่ชัดเจน
  • เลือกใช้ composition ร่วมกับมิกซ์อินแทนลำดับชั้นคลาสที่ลึก
  • ทดสอบเมธอดที่ผสมเข้ามาเช่นเดียวกับฟังก์ชันทั่วไป
มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 6

แบบทดสอบการนำมิกซ์อินไปใช้

ตรวจสอบอย่างรวดเร็ว: นำมิกซ์อินไปใช้กับคลาส

มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 7

ทบทวน

ทบทวน: กำหนด ออบเจ็กต์มิกซ์อิน ขนาดเล็ก คัดลอกไปยัง ต้นแบบสำหรับอินสแตนซ์ทั้งหมด (หรือคัดลอกไปยังออบเจ็กต์เดียว) และทำให้เมธอดมีขนาดเล็กเพื่อหลีกเลี่ยงความซับซ้อน

มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก — ภาพประกอบ 8
เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
59
บทเรียน
200

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

บทเรียน “มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก”

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

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

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

บทเรียน “มิกซ์อิน (ลองทำความรู้จัก) — นำกลับมาใช้ใหม่โดยไม่สร้างลำดับชั้นลึก” ใช้เวลานานแค่ไหน

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

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

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

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

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