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

สร้างมิกซ์อิน
มิกซ์อิน คือออบเจ็กต์ที่มีเมธอดสำหรับแบ่งปันระหว่างชนิดต่าง ๆ
// 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));

มิกซ์อินผ่านต้นแบบ
คัดลอกเมธอดของมิกซ์อินไปยัง 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());

มิกซ์อินสำหรับอินสแตนซ์เดียว
ใช้ 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());

ฟังก์ชันสร้างกับมิกซ์อิน
ฟังก์ชันสร้างขนาดเล็กสามารถสร้างออบเจ็กต์พื้นฐานก่อน แล้วจึงผสมพฤติกรรมเพิ่มเติมเข้าไป
// 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());

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

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

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

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