كل مصروف في Pocket يحتاج إلى معرّف (id) فريد كي تستطيع لاحقًا تعديله هو بالذات أو حذفه. والطريقة البديهية عدّاد في أعلى الملف:
\nlet nextId = 1;\nfunction createId() {\n return `exp-${nextId++}`;\n}هذا يعمل، إلى أن يأتي جزء آخر من البرنامج، ربما ميزة “إعادة التعيين” كُتبت بعد أشهر، فيضبط nextId = 1 من جديد، فتحصل على مصروفين باسم exp-1. العدّاد مرئي في كل مكان، لذلك يستطيع أي شيء أن يُفسده. ولكي تحميه، تحتاج إلى فهم النطاق (scope): قواعد المكان الذي يمكن أن يُرى فيه اسم ما.
كل زوج من الأقواس المعقوفة يُنشئ كتلة (block)، وأسماء let وconst تعيش في الكتلة التي صُرّح بها فيها. والدوال تُنشئ نطاقًا أيضًا. أما الأسماء المُصرَّح بها خارج كل الكتل والدوال فهي في النطاق العام (global scope)، ومرئية في كل مكان.
const appName = \"Pocket\"; // global\n\nfunction describe(amount) {\n const size = amount > 10000 ? \"big\" : \"small\"; // function scope\n if (size === \"big\") {\n const warning = \"Think twice\"; // block scope\n console.log(appName, size, warning);\n }\n // console.log(warning) here would throw a ReferenceError\n}\n\ndescribe(12000);حين يصادف المحرّك اسمًا، يبحث عنه في النطاق الحالي أولًا. فإن لم يجده هناك، بحث في النطاق المحيط، ثم في الذي يحيط به، وصولًا إلى النطاق العام. وإن لم يجده بعد ذلك، تحصل على ReferenceError: … is not defined. والبحث يتّجه إلى الخارج فقط: الكود داخل الدالة يستطيع قراءة appName العام، لكن الكود خارج الدالة لا يستطيع أبدًا رؤية size.
ولهذا جُعل سطر warning تعليقًا. فالكتلة التي صرّحت بـ warning انتهت، فاختفى الاسم.
إذا صرّح نطاق داخلي باسم موجود أصلًا في الخارج، فإن الاسم الداخلي يحجب (shadows) الخارجي: داخل الكتلة، يعني الاسم المتغيّر الداخلي. هذا مسموح، لكن وجود شيئين مختلفين باسم واحد يجعل الكود صعب القراءة، فاختر أسماء مختلفة.
\nقبل عام 2015، لم يكن في JavaScript إلا var، وvar تتجاهل الكتل: إنها مرئية في الدالة التي هي فيها بالكامل. وهذا يُنتج خطأً شهيرًا. هنا تجدول الحلقة ثلاث دوال لتُنفَّذ بعد لحظة باستخدام setTimeout:
for (var i = 0; i < 3; i++) {\n setTimeout(() => console.log(\"var:\", i), 0);\n}\nfor (let j = 0; j < 3; j++) {\n setTimeout(() => console.log(\"let:\", j), 0);\n}حلقة var تطبع 3 ثلاث مرات، لأن هناك i واحدًا فقط للحلقة كلها، وحين تُنفَّذ الدوال يكون قد بلغ 3. أما حلقة let فتطبع 0 و1 و2، لأن let تُنشئ j جديدًا في كل دورة، وكل دالة تحتفظ بنسختها الخاصة. وتذكّر هذه الدوال للمتغيّرات هو بالضبط ما يُسمّى closure.
الدالة التي تُنشأ داخل دالة أخرى تستطيع استخدام متغيّرات الدالة الخارجية. والمفاجأة أنها تحتفظ بهذا الوصول بعد أن تنتهي الدالة الخارجية:
\nfunction createIdGenerator(prefix) {\n let count = 0;\n return () => {\n count++;\n return `${prefix}-${count}`;\n };\n}\n\nconst nextExpenseId = createIdGenerator(\"exp\");\nconst nextCategoryId = createIdGenerator(\"cat\");\n\nconsole.log(nextExpenseId());\nconsole.log(nextExpenseId());\nconsole.log(nextCategoryId());\nconsole.log(nextExpenseId());تتبّع المحرّك. استدعاء createIdGenerator("exp") يُنشئ prefix وcount جديدين، ويبني الدالة السهمية، ويُرجعها. في العادة تختفي متغيّرات الدالة حين تنتهي، لكن الدالة السهمية ما زالت تشير إلى count وprefix، فيبقيان حيّين، ملتصقين بها. وهذا الاقتران بين دالة والمتغيّرات التي وُلدت بجوارها هو ما يُسمّى closure.
كل استدعاء لـ createIdGenerator يُنشئ مجموعة جديدة منفصلة من المتغيّرات. ولهذا يبدأ nextCategoryId() من 1، وتستمر معرّفات المصاريف من حيث توقّفت.
والآن انظر إلى الأمان الذي كسبته. لا يوجد count عام. لا يستطيع أي كود آخر قراءته، ولا تصفيره، ولا ضبطه على قيمة مكرّرة. والطريقة الوحيدة للتأثير فيه هي استدعاء الدالة التي أُعطيت لك، وهي لا تستطيع إلا أن تدفعه إلى الأمام. هذه هي الطريقة المعتمدة لمنح دالة حالة خاصة (private state) في JavaScript.
يستطيع الـ closure أن يحمي أكثر من مجرّد عدّاد. هذه ميزانية لا يمكن أن تنقص إلا عبر الدالة التي تسلّمها:
\nfunction createBudget(limitCents) {\n let remaining = limitCents;\n return (spentCents) => {\n remaining -= spentCents;\n return remaining;\n };\n}\n\nconst spend = createBudget(2000);\nconsole.log(spend(450));\nconsole.log(spend(1220));اكتمل القسم 2: تستطيع الآن اتخاذ القرارات، وتكرار العمل، وحزمه في دوال لها حالتها الخاصة. وينتقل القسم 3 إلى البيانات، بدءًا بالقائمة التي كنت تمرّ عليها: المصفوفة.
\n","toc":[{"id":"sec-1","text":"الكتل والدوال والنطاق العام","level":2},{"id":"sec-2","text":"مشكلة var","level":2},{"id":"sec-3","text":"الـ Closures: دوال تتذكّر","level":2}],"takeaways":["النطاق (scope) هو المكان الذي يمكن فيه استخدام اسم ما:let وconst تعيشان في أقرب كتلة { }، والبحث عن الأسماء يتّجه إلى الخارج، لا إلى الداخل أبدًا.","الاسم الداخلي الذي يحمل اسم متغيّر خارجي “يحجبه” (shadowing) داخل النطاق الداخلي، وهذا مسموح لكن من السهل أن يُساء فهمه.","var تتجاهل الكتل ويمتد نطاقها إلى الدالة كلها، وهذا يسبّب أخطاء كلاسيكية؛ استخدم let وconst.","الـ closure دالة تحتفظ بإمكانية الوصول إلى متغيّرات النطاق الذي أُنشئت فيه، حتى بعد أن تكون الدالة الخارجية قد انتهت.","كل استدعاء للدالة الخارجية يُنشئ مجموعة جديدة من المتغيّرات، لذلك يملك كل closure تُرجعه حالته الخاصة."],"further":[{"title":"Closures (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"},{"title":"Scope (MDN glossary)","url":"https://developer.mozilla.org/en-US/docs/Glossary/Scope"},{"title":"var (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var"}],"quiz":[{"q":"ماذا يحدث حين يُنفَّذ هذا الكود؟
\nfunction check(amount) {\n if (amount > 100) {\n const label = \"big\";\n }\n return label;\n}\nconsole.log(check(500));big.","why":"صُرّح بـ label باستخدام const داخل كتلة if، لذلك لا وجود له خارج هذين القوسين."},{"text":"يطبع undefined.","why":"undefined هي ما تعطيه var حين تُتخطّى كتلة if، كما في check(50)؛ بل إن var مع 500 كانت ستطبع big. أما مع const فالاسم لا وجود له خارج كتلته، لذلك استخدامه هناك خطأ."},{"text":"يرمي ReferenceError: label is not defined.","why":"صحيح. نطاق الكتلة يعني أن label يختفي عند القوس المعقوف الذي يُغلق if، وreturn label لا تستطيع رؤيته."}],"answer":2},{"q":"ماذا يطبع هذا الكود؟
\nfunction makeCounter() {\n let count = 0;\n return () => {\n count++;\n return count;\n };\n}\nconst a = makeCounter();\nconst b = makeCounter();\na(); a();\nconsole.log(a(), b());3 1","why":"صحيح. كل استدعاء لـ makeCounter يُنشئ count خاصًا به. استُدعيت a ثلاث مرات، وb مرة واحدة."},{"text":"3 4","why":"هذا يتطلّب count واحدًا مشتركًا. لكن كل استدعاء لـ makeCounter يُنشئ واحدًا منفصلًا."},{"text":"1 1","why":"count لا يُعاد تصفيره مع كل استدعاء للدالة الداخلية؛ فالـ closure يُبقي المتغيّر نفسه حيًا بين الاستدعاءات."},{"text":"0 0","why":"كل استدعاء للدالة المُعادة ينفّذ count++ قبل الإرجاع، لذلك يُرجع الاستدعاء الأول 1 أصلًا."}],"answer":0},{"q":"لماذا يُعدّ مولّد المعرّفات المبني على closure أكثر أمانًا من let nextId = 1 عام؟
مولّد المعرّفات في كود البداية يتشارك count عامًا واحدًا، فيتداخل مولّدان معًا ويستطيع أي كود تصفيره. أعِد كتابة createIdGenerator(prefix) بحيث يملك كل مولّد عدّاده الخاص، ولا يبقى أي count عام: أول معرّف من أي مولّد جديد هو دائمًا prefix-1.
ثم اكتب createBudget(limitCents)، التي تُرجع دالة spend(cents). كل استدعاء يطرح cents من مبلغ متبقٍّ خاص (يبدأ من limitCents) ويُرجع ما تبقّى. ويمكن أن يصبح سالبًا.
createIdGenerator تُنشأ من جديد مع كل استدعاء. انقل let count = 0; إلى هناك واحذف المتغيّر العام.","لـ createBudget الشكل نفسه: صرّح بـ let remaining = limitCents;، ثم return (cents) => { … };.","داخل الدالة المُعادة: remaining -= cents; return remaining;."],"explanation":"التصريح بـ count داخل createIdGenerator يعني أن كل استدعاء يُنشئ متغيّرًا جديدًا، وأن الدالة السهمية المُعادة من ذلك الاستدعاء تحتفظ بنسختها الخاصة منه. ولهذا لم يعد المولّدان يتداخلان، ولهذا يكون أول معرّف دائمًا 1. وبعد حذف المتغيّر العام، لا يستطيع أي شيء خارج الـ closure لمس العدّاد. وتستخدم createBudget النمط نفسه: يبقى remaining حيًا بين استدعاءات spend لأن الدالة المُعادة ما زالت تشير إليه، ومع ذلك لا يستطيع أي كود آخر قراءته أو تغييره إلا عبر spend.
count عام","budget":"spend تطرح وتُرجع ما تبقّى","budget-independent":"ميزانيتان تحتفظ كلٌّ منهما بمبلغها المتبقّي المنفصل"}},"words":622,"readMinutes":4}