الكائنات
تعرف الدوال والإغلاقات؛ يمكنك جمع المنطق. الصفحة الحقيقية تحتاج أيضاً بيانات منظّمة: عنوان السلعة وسعرها ومخزونها ينتميان معاً. الكائن (object) قيمة واحدة تحمل عدة أجزاء بأسماء.
ماذا يعني الكائن
يخزّن الكائن بيانات مترابطة كـخصائص (properties). لكل خاصية مفتاح (key) — الاسم — وقيمة (value). للمبتدئين نبدأ غالباً بـحرفي كائن: أقواس معقوفة { } وداخلها أزواج مفتاح: قيمة. لا تحتاج صنفاً (class) في هذه الخطوة الأولى.
أربع قطع راقبها
📊 الحرفي والمفتاح والقيمة والوصول
| القطعة | الدور | إشارة للمبتدئ |
|---|---|---|
| حرفي الكائن | قيمة { … } التي تسندها لمتغير |
حقيبة واحدة لبيانات مترابطة |
| المفتاح | اسم الخاصية يسار : |
كيف تسمّي الجزء |
| القيمة | البيانات يمين : |
نص، رقم، منطقي، … |
| الوصول | قراءة أو كتابة بـ . أو [ ] |
كيف تصل لاحقاً لجزء واحد |
إن استطعت الإشارة إلى هذه الأربع، تشرح تقريباً كل مثال أول للكائنات. المفاجأة عند كثيرين ليست الأقواس — بل أن متغيراً واحداً صار يحمل عدة حقول مسماة.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
الأقواس المعقوفة تبني الكائن
book قيمة واحدة. داخله title وpages خاصيتان. الفواصل تفصل الأزواج. بعد } يصبح الكائن جاهزاً. طباعة book تعرض الحقيبة كلها في وحدة التحكم.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
النقطة تصل إلى حقل واحد
اكتب اسم الكائن ثم نقطة ثم المفتاح: book.title. النتيجة النص "Maps". تدوين النقطة هو الطريق اليومي لقراءة اسم خاصية معروف. يجب أن يشبه المفتاح معرّفاً صالحاً في هذا الشكل.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
الأقواس تصل أيضاً إلى الحقل
هنا book["title"] نفس قيمة book.title. الأقواس تأخذ نصاً (أو تعبيراً يصبح مفتاحاً). استخدمها حين يكون المفتاح في متغير، أو حين لا يكون الاسم معرّفاً بسيطاً. للأسماء الثابتة غالباً تكون النقطة أوضح.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
يمكنك تحديث خاصية لاحقاً
الإسناد إلى book.pages يغيّر ذلك الحقل. الكائن يبقى نفس الحقيبة؛ قيمة واحدة داخله جديدة. القراءة مجدداً تُظهر 140. دروس لاحقة تتعمّق في إضافة الخصائص وسردها — هنا الهدف تحديث أول واضح.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
الحقول المترابطة تنتقل معاً
name وprice يصفان سلعة واحدة. إبقاؤهما على كائن واحد أفضل من متغيرين عامّين منفصلين قد يتباعدان. عندما تمرّر item لدالة أو تضعه في الصفحة، ينتقل الحقلان كوحدة واحدة.
اعرض حقلاً من الكائن في الصفحة
أنشئ كائن منتج صغير، اقرأ خاصية، وضع ذلك النص في فقرة.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
تُظهر الفقرة Lamp — 25. غيّر فقط name أو price في الكائن، حدّث الصفحة، واقرأ السطر الجديد. الدرس التالي يتعمّق في خصائص الكائن — سلوك المفاتيح والعمل اليومي معها.
خطوات التدريب
- أنشئ كائناً بخاصيتين عبر حرفي.
- اطبع خاصية بنقطة في وحدة التحكم.
- اطبع نفس الخاصية بأقواس ومفتاح نصي.
- غيّر خاصية واطبع القيمة الجديدة.
- ابنِ
itemفيهnameوprice؛ اطبع الحقلين. - في عرض HTML غيّر قيم الكائن فقط، حدّث، واقرأ الفقرة.
أخطاء شائعة
- معاملة الكائن كقائمة مرقّمة (ذلك أقرب إلى مصفوفة لاحقاً في الدورة)
- نسيان علامات الاقتباس حول قيم النص —
title: Mapsبلا اقتباس خطأ - الخلط بين المفتاح والقيمة عند شرح الحرفي
- توقع دوال أو
thisأو أدوات خصائص عميقة في هذه الصفحة الأولى — تأتي لاحقاً - إنشاء متغير عام لكل حقل بدل كائن واحد
خلاصة
- يجمع الكائن قيماً مترابطة كخصائص مسماة
- الحرفي شكله
{ مفتاح: قيمة، … } - تدوين النقطة (
obj.key) يقرأ خاصية معروفة - الأقواس (
obj["key"]) تقرأ بمفتاح نصي - يمكنك الإسناد لخاصية لتحديثها لاحقاً
- الحقول المترابطة تبقى معاً حين يتحرك الكائن
- تحديث الصفحة يمكن أن يبني نصاً من حقول الكائن
- التالي: خصائص الكائن — عمل أعمق مع المفاتيح
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى