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

ล้างช่วงเวลา
เก็บ รหัสของช่วงเวลาไว้ แล้วเรียก clearInterval ระหว่างการล้างข้อมูล เพื่อให้ตัวจับเวลาและค่าที่คลอเชอร์จับไว้ถูกเก็บคืนได้
// Start an interval and then clear it to avoid leaks
function startTicker() {
// store id so we can clear later
const id = setInterval(function () {
// work would run every X ms; omitted for demo
}, 1000);
// simulate screen close / cleanup
clearInterval(id);
console.log("interval cleared");
}
startTicker();

คลอเชอร์ที่มีขนาดเล็กลง
คลอเชอร์จะเก็บสิ่งที่จับไว้ ให้จับ ค่าขนาดเล็ก แทนทั้งอ็อบเจ็กต์เมื่อทำได้
// Avoid capturing large objects when only small data is needed
function makeReporter(bigArray) {
// BAD: store the whole array inside the closure
const large = bigArray;
return function reportLength() {
// Only the length is used
return large.length;
};
}
// BETTER: capture only what you need
function makeReporterBetter(bigArray) {
const count = bigArray.length; // small number
return function reportLength() {
return count;
};
}
const arr = new Array(1000).fill(0);
const bad = makeReporter(arr);
const good = makeReporterBetter(arr);
console.log("bad:", bad(), "good:", good());

จำกัดขนาดบัฟเฟอร์
อาร์เรย์หรือแผนที่ที่มีอายุยาวนานอาจทำให้หน่วยความจำรั่วไหล หากขยายโดยไม่มีขอบเขต ควร ตัดขนาด หรือ รีเซ็ต เป็นประจำ
// A growing buffer can leak if never trimmed or reset
const buffer = []; // module-level array
function logItem(x) {
buffer.push(x); // grows forever if not managed
}
// Simulate usage
logItem("a");
logItem("b");
// FIX: trim or reset when size is over a limit
function trimBuffer(limit) {
if (buffer.length > limit) {
buffer.length = limit; // drop old items
}
}
trimBuffer(1);
console.log("buffer size:", buffer.length);

ตัวอย่างการใช้ WeakMap
WeakMap มีประโยชน์สำหรับแนบข้อมูลกำกับโดยไม่ป้องกันไม่ให้อ็อบเจ็กต์คีย์ถูกเก็บคืนโดยระบบจัดการหน่วยความจำ
// WeakMap holds keys weakly: when the object is gone, the entry can be collected
const meta = new WeakMap();
function attachMeta(obj, info) {
meta.set(obj, info);
}
function readMeta(obj) {
return meta.get(obj); // undefined if not set or collected
}
let user = { name: "Ayla" };
attachMeta(user, { seen: true });
console.log("meta now:", readMeta(user));
// Later: drop the only strong reference
user = null; // after this, the object and its metadata can be GC'd at some point
console.log("object reference dropped (cannot show GC in console)");

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

แบบทดสอบการล้างตัวจับเวลา
ตรวจสอบอย่างรวดเร็ว: ตัวจับเวลาและการรั่วไหล

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

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