الجزء التاسع – الكائنات (Objects) في JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 98 دقيقة واحدة

✅ الكائنات (Objects) في JavaScript

🔶 أولاً: يعني إيه كائن؟

الكائن (Object) هو نوع بيانات بيسمحلك تخزن البيانات والوظائف (توابع) مع بعض في متغير واحد.

يعني تقدر تعتبره زي كرت شخصي فيه بياناتك وطرق تتعامل معاك.

✳️ إنشاء كائن (Object)

✅ الشكل العام

let person = {
  الاسم: "أحمد",
  العمر: 25,
  البلد: "مصر"
};

الكائن بيتكون من خصائص (Properties)، كل خاصية عبارة عن:

الاسم: القيمة

✅ الوصول للخصائص

1. ✅ باستخدام Dot Notation

console.log(person.الاسم); // "أحمد"

2. ✅ باستخدام Bracket Notation:

console.log(person["العمر"]); // 25

الفرق الأساسي: لو اسم الخاصية فيه مسافات أو رموز لازم تستخدم Brackets:

let car = {
  "نوع السيارة": "Toyota"
};

console.log(car["نوع السيارة"]); // ✅

✳️ تعديل وإضافة خصائص

person.الوظيفة = "مبرمج";         // إضافة خاصية
person.العمر = 26;                // تعديل قيمة

✅ حذف خاصية

delete person.البلد;

✳️ توابع الكائن (Object Methods)

التابع (Method) هو دالة داخل الكائن.

✅ مثال

let user = {
  الاسم: "منى",
  قل_أهلا: function() {
    console.log("أهلا! أنا " + this.الاسم);
  }
};

user.قل_أهلا(); // "أهلا! أنا منى"

this بتشير للكائن نفسه (user في الحالة دي).

✅ 💯 مثال كامل عملي على الكائنات

<!DOCTYPE html>
<html>
<head>
  <title>الكائنات في JavaScript</title>
</head>
<body>
  <h2>افتح الكونسول (F12) علشان تشوف الشرح</h2>

  <script>
    // إنشاء كائن
    let student = {
      الاسم: "أحمد",
      العمر: 22,
      الجامعة: "جامعة القاهرة",
      قل_مرحبًا: function() {
        console.log("مرحبًا! أنا " + this.الاسم + " من " + this.الجامعة);
      }
    };

    // الوصول للخصائص
    console.log("اسم الطالب:", student.الاسم);
    console.log("عمر الطالب:", student["العمر"]);

    // تعديل خاصية
    student.العمر = 23;

    // إضافة خاصية جديدة
    student.القسم = "حاسبات";

    // حذف خاصية
    delete student.الجامعة;

    // استدعاء تابع الكائن
    student.قل_مرحبًا();

    // طباعة الكائن كله بعد التعديلات
    console.log("بيانات الطالب بعد التعديلات:", student);
  </script>
</body>
</html>

✅ ملخص سريع:

العنصر	الغرض
`{}`	لإنشاء كائن
`.` أو `[]`	للوصول للخصائص
`this`	تشير للكائن الحالي داخل التابع
`delete`	لحذف خاصية
دالة داخل كائن	تُعرف كـ “تابع”