Closures — الحقيبة اللي بتفضل معاك

١ — الفكرة في 3 جمل

٢ — مثال أساسي: عداد بيتذكر نفسه

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter1 = makeCounter();
console.log(counter1());
console.log(counter1());
console.log(counter1());

لاحظ: makeCounter() اتنفذت مرة واحدة بس وخلصت. بس الدالة اللي رجعتها لسه قادرة توصل لـ count وتزودها — رغم إن الـ frame بتاع makeCounter اتشال من الـ stack من زمان. الناتج الحقيقي:

1
2
3

✓ متحقق بتشغيل Node.js فعلي (2026-08-14). وكمان: typeof count من برة الدالة بيرجع undefined — يعني count محمية تمامًا، مفيش وصول مباشر ليها من أي حتة تانية.

٣ — اللغز المعلّق من 0007: اتحل رسمياً

ده نفس الكود اللي شفته في سيناريو C من 0007 (مبسّط شوية، من غير جزئية تبديل الأوبجكت اللي حللتها وقتها):

let user = { name: "عمر", hi() { console.log("أهلاً " + this.name); } };

function runLater(obj) {
  setTimeout(() => obj.hi(), 100);
}
runLater(user);

اللغز: runLater بتخلص وترجع فورًا (frame بتاعها بيتشال من الـ stack على طول)، قبل ما الـ 100ms تعدي بكتير. طب إزاي الـ arrow اللي جوه setTimeout لسه عارفة obj لما تيجي تتنفذ بعد كده؟

الإجابة دلوقتي واضحة: الـ arrow function اتعرّفت جوه runLater، فاتولدت ومعاها 🎒 حقيبة فيها رابط بـ obj (سلسلة البحث بتاعتها بتوصل لبيئة runLater، بنفس آلية 0003). لما runLater خلصت، الـ frame اتشال — بس الحقيبة فضلت حية لأن الموعد المسجل لسه شايلها. لما الموعد يجي، الـ arrow بتفتح الحقيبة وتلاقي obj زي ما هي.

✓ نفس الكود شغال ومتحقق منه: "أهلاً عمر" بتطبع بعد الـ 100ms بالظبط زي ما كان في 0007.

٤ — شوفها بعينك: الحقيبة في المحاكي

راقب البانل الأخضر المتقطع 🟩 — ده مش الـ Call Stack، ده مكان جديد لـالبيئات الباقية (بره الـ stack تمامًا). لما frame يتشال من 🟦 ومتغيراته لسه محتاجة، هتشوفها بتتحول لهناك. توقع قبل كل خطوة!

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}
const counter1 = makeCounter();
counter1();
counter1();

let user = { name: "عمر", hi() {...} };
function runLater(obj) {
  setTimeout(() => obj.hi(), 100);
}
runLater(user);

٥ — نقطة دقيقة: الحقيبة شايلة المتغير نفسه، مش نسخة منه

سؤال مهم: الـ closure بياخد قيمة المتغير وقت ما الدالة اتعرّفت، ولا بيفضل شايف المتغير نفسه حتى لو اتغيّر بعدين؟

function makeGreeter() {
  let name = "عمر";
  const greet = () => console.log("أهلاً " + name);
  name = "سارة";
  return greet;
}
const greet = makeGreeter();
greet();

لاحظ: name اتغيّرت لـ"سارة" بعد ما greet اتعرّفت، وقبل أي نداء عليها. الناتج الحقيقي:

أهلاً سارة

✓ متحقق بتشغيل Node.js فعلي (2026-08-14). يعني الحقيبة مش بتاخد "صورة" للقيمة وقت التعريف — هي بتفضل شايفة نفس المتغير الحي، بنفس آلية سلسلة البحث العادية (0003). ده بالظبط نفس المبدأ اللي شفته في تبديل الأوبجكت بسيناريو C من 0007.

٦ — توقع قبل ما تشوف (3 تمارين)

function makeAdder(base) {
  return function (n) { return base + n; };
}
const addFive = makeAdder(5);
console.log(addFive(0).toString());

const a = makeCounter();
const b = makeCounter();
a(); a();
console.log(b());

function makeGreeter() {
  let name = "عمر";
  const greet = () => console.log("أهلاً " + name);
  name = "سارة";
  return greet;
}
makeGreeter()();

٧ — اختبر نفسك

٨ — التحدي الأخير: صمّم حساب بنكي محمي (من غير AI!)

٩ — المصدر الأساسي للتعمق

• javascript.info — Variable scope, closure — الشرح المرجعي لآلية الـ Lexical Environment.
• MDN — Closures — المرجع الرسمي مع أمثلة إضافية (private methods، counters).
• ورقة المراجعة: reference/js-execution-model.html