{"id":"l-js-5-2","courseId":"javascript-fundamentals","lang":"ar","kind":"lesson","summary":"تعرّف الأصناف (classes) بـ constructor وmethods وgetters وحقول خاصة، وتُنشئ instances مستقلة بـ new، وتتجنّب خطأ ضياع this الكلاسيكي حين تمرّر الـ methods على أنها callbacks.","html":"

انظر إلى ما يفعله كود Pocket بمصاريفه: متغيّر يحمل المصفوفة، ونحو اثنتي عشرة دالة تأخذ كل منها تلك المصفوفة، وتفعل شيئًا، وتُرجع نتيجة. البيانات والعمليات عليها منفصلة، فلا شيء يمنع سطر كود شاردًا من دفع مصروف مشوّه مباشرة إلى المصفوفة. أما الصنف (class) فيحزم البيانات مع الدوال المسموح لها بالعمل عليها، ويستطيع أن يجعل البيانات نفسها بعيدة عن متناول الخارج.

\n

تعريف صنف

\n
JavaScript
class ExpenseStore {\n  #expenses = [];\n  #nextNumber = 1;\n\n  constructor(initial = []) {\n    for (const expense of initial) {\n      this.add(expense);\n    }\n  }\n\n  add({ label, amount, category = \"other\" }) {\n    const expense = { id: `exp-${this.#nextNumber++}`, label, amount, category };\n    this.#expenses.push(expense);\n    return expense;\n  }\n\n  remove(id) {\n    this.#expenses = this.#expenses.filter((e) => e.id !== id);\n  }\n\n  get total() {\n    return this.#expenses.reduce((sum, e) => sum + e.amount, 0);\n  }\n\n  list() {\n    return [...this.#expenses];\n  }\n}\n\nconst store = new ExpenseStore([{ label: \"Coffee\", amount: 450, category: \"food\" }]);\nstore.add({ label: \"Train\", amount: 1220, category: \"travel\" });\nconsole.log(store.total, store.list().map((e) => e.id));
\n

هناك الكثير هنا، فخذه قطعة قطعة.

\n

#expenses = [] تصرّح بـ حقل خاص (private field). كل instance (نسخة) تحصل على #expenses خاص بها، وعلامة # تجعله خاصًا: لا يستطيع قراءته أو الكتابة فيه إلا الكود الموجود داخل جسم الصنف. وفي الخارج، store.#expenses خطأ في الصياغة. ومن يريد تغيير القائمة عليه أن يمرّ عبر add وremove، اللتين تضمنان أن يحصل كل مصروف على معرّف وفئة.

\n

الـ constructor (الباني) method خاصة تُنفَّذ حين تكتب new ExpenseStore(...). ومهمتها تهيئة الكائن الجديد. وهي هنا تضيف أي مصاريف ابتدائية عبر add، فتخضع للقواعد نفسها.

\n

add وremove وlist هي methods (دوال الكائن). وداخل الـ method، تشير this إلى الكائن الذي استُدعيت عليه: في store.add(...)، تكون this هي store.

\n

get total() هو getter. تقرؤه كأنه خاصية، store.total، دون أقواس، لكنه ينفّذ كودًا في كل مرة. فالمجموع المخزّن في حقل قد يصبح قديمًا حين يُحذف مصروف؛ أما الـ getter فيُحسب دائمًا من البيانات الحالية.

\n

list() تُرجع نسخة، [...this.#expenses]، لا المصفوفة نفسها. فإرجاع المصفوفة الحقيقية سيسمح للمُستدعين بـ push فيها، ويُبطل كل الحماية.

\n

الـ Instances: مخطّط واحد وكائنات كثيرة

\n

new تُنشئ كائنًا جديدًا، وتنفّذ الـ constructor وthis تشير إليه، ثم تُرجعه. لكل instance حقولها الخاصة؛ أما الـ methods فتُعرَّف مرة واحدة على الصنف وتُتشارك.

\n
\n يعرّف الصنف ExpenseStore الـ methods‏ add وremove وlist والـ getter‏ total. ولكل من الـ instances‏ home وwork مصفوفة expenses خاصة بها، وكلتاهما تستخدمان الـ methods المشتركة.\n \n class ExpenseStore\n add, remove, list\n get total\n \n home\n #expenses: 12 عنصرًا\n \n work\n #expenses: 3 عناصر\n \n \n new ExpenseStore()\n
صنف واحد وinstances كثيرة لكل منها بياناتها
\n
JavaScript
class ExpenseStore {\n  #expenses = [];\n  add(expense) { this.#expenses.push(expense); }\n  get count() { return this.#expenses.length; }\n}\n\nconst home = new ExpenseStore();\nconst work = new ExpenseStore();\nhome.add({ label: \"Groceries\", amount: 6400 });\nconsole.log(home.count, work.count);
\n

إن ذكّرك هذا بـ createBudget من درس الـ closures، فهذا طبيعي. الـ closure والصنف ذو الحقول الخاصة يحلّان المشكلة نفسها: بيانات لا تستطيع لمسها إلا دوال معيّنة. الـ closures أخفّ مع دالة واحدة؛ والأصناف أوضح حين تتشارك عدّة عمليات البيانات نفسها.

\n

ضياع this

\n

this لا تُثبَّت حين تكتب الـ method. بل تتحدّد في كل مرة تُستدعى فيها الدالة، بحسب ما يقع على يسار النقطة. store.add(x) تستدعي add وthis مضبوطة على store. لكن إن مرّرت الـ method إلى مكان ما وحدها، فلن تكون هناك نقطة حين تُستدعى في النهاية:

\n
JavaScript
class Greeter {\n  name = \"Pocket\";\n  hello() {\n    return `Hello from ${this.name}`;\n  }\n}\n\nconst g = new Greeter();\nconsole.log(g.hello());\n\nconst detached = g.hello;\ntry {\n  console.log(detached());\n} catch (error) {\n  console.log(\"Error:\", error.message);\n}\n\nconst wrapped = () => g.hello();\nconsole.log(wrapped());
\n

الاستدعاء الأول ينجح لأن g على يسار النقطة. أما detached() فتُستدعى ولا شيء على يسار أي نقطة، فتكون this داخلها undefined (أجسام الأصناف تعمل دائمًا في الوضع الصارم)، وقراءة this.name ترمي خطأ.

\n\n

يمكن للأصناف أيضًا أن تُبنى فوق أصناف أخرى باستخدام extends، فترث methods الصنف الآخر وتضيف methods جديدة. ستستخدم ذلك مرة واحدة، في الدرس التالي، لتصنع نوع خطأ خاصًا بك. وفيما عدا ذلك، فالخيار الافتراضي الجيد في كود التطبيقات هو تفضيل الأصناف الصغيرة والدوال العادية على سلاسل الوراثة العميقة، التي يصعب تغييرها عادةً.

\n\n

صار مخزنك يرفض التغييرات السيئة من الخارج. والدرس التالي عمّا يحدث حين يسوء شيء ما رغم ذلك: الأخطاء، وكيف ترميها وتلتقطها عن قصد، وكيف تطارد الأخطاء البرمجية بأدوات DevTools في المتصفّح.

\n","toc":[{"id":"sec-1","text":"تعريف صنف","level":2},{"id":"sec-2","text":"الـ Instances: مخطّط واحد وكائنات كثيرة","level":2},{"id":"sec-3","text":"ضياع this","level":2}],"takeaways":["الصنف (class) مخطّط؛ وnew ClassName(...) تنفّذ الـ constructor وتُرجع instance جديدة لها بياناتها الخاصة.","الـ methods مشتركة بين كل الـ instances، وداخلها تشير this إلى الـ instance التي استُدعيت عليها الـ method.","الحقول الخاصة (#expenses) لا يمكن قراءتها إلا داخل جسم الصنف، وهذا يحمي بيانات الكائن كما تفعل الـ closures.","الـ getter (get total()) يُقرأ كأنه خاصية لكنه يُحسب في كل مرة، فلا تصبح القيم المشتقّة قديمة أبدًا.","تمرير store.add على أنها callback يُضيّع this؛ غلّفها بدالة سهمية: (e) => store.add(e)."],"further":[{"title":"Classes (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"},{"title":"Private elements (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements"},{"title":"this (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"}],"quiz":[{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
class Counter {\n  count = 0;\n  increment() { this.count++; }\n}\nconst a = new Counter();\nconst b = new Counter();\na.increment();\na.increment();\nconsole.log(a.count, b.count);
\n","options":[{"text":"2 2","why":"الحقول تُنشأ لكل instance على حدة، لذلك لـ b حقل count خاص بها لم يزده أحد."},{"text":"1 1","why":"استُدعيت increment مرتين على a، ولم تُستدعَ أبدًا على b."},{"text":"0 0","why":"this.count++ تغيّر الـ instance التي استُدعيت عليها، لذلك تزيد a.count."},{"text":"2 0","why":"صحيح. كل new Counter() تُنشئ كائنًا منفصلًا له count خاص به؛ الـ method مشتركة، أما البيانات فلا."}],"answer":3},{"q":"

button.addEventListener("click", store.clear); تجعل clear ترمي TypeError عن الحقل الخاص #expenses (“…from an object whose class did not declare it”) حين يُنقر الزر. لماذا؟

","options":[{"text":"لا يمكن استخدام methods الأصناف مستمعين للأحداث.","why":"يمكن ذلك، ما دامت تُستدعى بـ this الصحيحة. المشكلة في طريقة تمرير الـ method."},{"text":"مُرّرت الـ method وحدها، لذلك حين يستدعيها المتصفّح لا تكون this هي store.","why":"صحيح. this تتحدّد بطريقة استدعاء الدالة، والمتصفّح يستدعي المستمع وthis مضبوطة على العنصر، أي الزر هنا. اكتب () => store.clear() كي تُستدعى على store."},{"text":"store أُنشئ بـ const ولا يمكن تغييره.","why":"const لا تمنع methods الكائن من تغيير حقوله. المشكلة هي ضياع this."}],"answer":1},{"q":"

يحتفظ ExpenseStore بقائمته في #expenses. ماذا تفعل store.#expenses المكتوبة خارج الصنف؟

","options":[{"text":"إنها خطأ في الصياغة؛ الحقول الخاصة لا يمكن الوصول إليها إلا داخل جسم الصنف.","why":"صحيح. المحرّك يفرض الخصوصية، لذلك على الكود الخارجي استخدام الـ methods العامة."},{"text":"تُرجع المصفوفة، لأن # مجرّد عرف في التسمية.","why":"العرف الأقدم _expenses كان مجرّد تلميح. أما # فخصوصية حقيقية تفرضها اللغة."},{"text":"تُرجع undefined.","why":"إنها لا تُنفَّذ أصلًا. استخدام #expenses خارج الصنف يُرفض لحظة تحليل الكود."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Pocket's data, unprotected: any code can push anything into it.\nclass ExpenseStore {\n constructor() {\n this.expenses = [];\n }\n\n add(expense) {\n this.expenses.push(expense);\n }\n}\n\nconst store = new ExpenseStore();\nstore.add({ label: \"Coffee\", amount: 450, category: \"food\" });\nconsole.log(store.expenses);\n"},"solution":{"js":"class ExpenseStore {\n #expenses = [];\n #nextNumber = 1;\n\n add({ label, amount, category = \"other\" }) {\n const expense = { id: `exp-${this.#nextNumber++}`, label, amount, category };\n this.#expenses.push(expense);\n return expense;\n }\n\n remove(id) {\n this.#expenses = this.#expenses.filter((e) => e.id !== id);\n }\n\n list() {\n return [...this.#expenses];\n }\n\n get total() {\n return this.#expenses.reduce((sum, e) => sum + e.amount, 0);\n }\n\n totalFor(category) {\n return this.#expenses\n .filter((e) => e.category === category)\n .reduce((sum, e) => sum + e.amount, 0);\n }\n}\n\nconst store = new ExpenseStore();\nstore.add({ label: \"Coffee\", amount: 450, category: \"food\" });\nconsole.log(store.list(), store.total);\n"},"checks":[{"id":"add-returns","test":"const s = new ExpenseStore();\nconst a = s.add({ label: 'Coffee', amount: 450, category: 'food' });\nconst b = s.add({ label: 'Gift', amount: 5000 });\nreturn a && a.id === 'exp-1' && b.id === 'exp-2' && b.category === 'other' && a.label === 'Coffee' && a.amount === 450;\n"},{"id":"list-copy","test":"const s = new ExpenseStore();\ns.add({ label: 'Coffee', amount: 450, category: 'food' });\nconst l = s.list();\nl.push({ id: 'hack', label: 'x', amount: 1 });\nreturn Array.isArray(l) && s.list().length === 1;\n"},{"id":"private","test":"const s = new ExpenseStore();\ns.add({ label: 'Coffee', amount: 450, category: 'food' });\nreturn Object.keys(s).length === 0 && !Object.values(s).some(Array.isArray);\n"},{"id":"remove","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 1, category: 'x' });\nconst b = s.add({ label: 'B', amount: 2, category: 'x' });\ns.remove('exp-1');\nconst l = s.list();\nreturn l.length === 1 && l[0].id === b.id;\n"},{"id":"total-getter","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 450, category: 'food' });\ns.add({ label: 'B', amount: 1220, category: 'travel' });\nconst d = Object.getOwnPropertyDescriptor(ExpenseStore.prototype, 'total');\nconst before = s.total;\ns.remove('exp-1');\nreturn !!d && typeof d.get === 'function' && before === 1670 && s.total === 1220;\n"},{"id":"total-for","test":"const s = new ExpenseStore();\ns.add({ label: 'A', amount: 450, category: 'food' });\ns.add({ label: 'B', amount: 1220, category: 'travel' });\ns.add({ label: 'C', amount: 1350, category: 'food' });\nreturn s.totalFor('food') === 1800 && s.totalFor('fun') === 0;\n"},{"id":"independent","test":"const a = new ExpenseStore();\nconst b = new ExpenseStore();\na.add({ label: 'A', amount: 1 });\na.add({ label: 'B', amount: 2 });\nconst first = b.add({ label: 'C', amount: 3 });\nreturn b.list().length === 1 && first.id === 'exp-1' && a.total === 3;\n"}],"title":"مخزن يحمي بياناته","prompt":"

أعِد كتابة ExpenseStore بحيث لا تتغيّر بياناته إلا عبر الـ methods الخاصة به:

\n\n","hints":["صرّح بالحقول في أعلى جسم الصنف: #expenses = []; و#nextNumber = 1;. وداخل الـ methods، استخدم this.#expenses.","ابنِ المعرّف بـ `exp-${this.#nextNumber++}`، وفكّك المعامل مع قيمة افتراضية: add({ label, amount, category = "other" }).","get total() { return this.#expenses.reduce((sum, e) => sum + e.amount, 0); }. وlist() تُرجع [...this.#expenses]."],"explanation":"

الحقول الخاصة تعني أن الطريقة الوحيدة لتغيير القائمة هي عبر add وremove، فيُضمن لكل مصروف معرّف وفئة، ولا يستطيع الكود الخارجي دسّ كائن ناقص. وكل new ExpenseStore() تحصل على #expenses و#nextNumber خاصين بها، ولهذا يعدّ مخزنان المعرّفات كلٌّ على حدة. وتُرجع list() نسخة، لأن تسليم المصفوفة الحقيقية سيسمح للمُستدعين بتعديلها وتجاوز القواعد. أما total فـ getter يُحسب من البيانات الحالية في كل مرة يُقرأ فيها، فلا يمكن أن يختلف أبدًا مع القائمة، حتى بعد الحذف.

\n","checkLabels":{"add-returns":"add تُرجع المصروف الجديد مع معرّف وفئة افتراضية","list-copy":"list تُرجع نسخة، فتغييرها لا يغيّر المخزن","private":"ليست للمخزن أي خصائص بيانات عامة","remove":"remove تحذف المصروف صاحب ذلك المعرّف","total-getter":"total هو getter يبقى محدّثًا","total-for":"totalFor تجمع فئة واحدة","independent":"مخزنان يحتفظ كلٌّ منهما ببياناته وعدّاد معرّفاته المنفصل"}},"words":574,"readMinutes":3}