تعلم كائنات JavaScript - شرح مبسط للمبتدئين مع أمثلة عملية

🧱 ما هي كائنات الجافاسكريبت؟ شرح شامل للمبتدئين

مرحباً بكم في عالم البرمجة الكائنية! 🎯 تخيل معي أنك تريد تخزين معلومات عن طالب في برنامجك. لديك اسمه، عمره، تخصصه، ودرجاته. هل ستستخدم متغيرات منفصلة مثل studentName و studentAge؟ هذا غير عملي مع زيادة البيانات. هنا يأتي دور الكائنات (Objects) في الجافاسكريبت! الكائن هو عبارة عن حاوية خاصة تستطيع تخزين مجموعة من البيانات المتعلقة ببعضها تحت اسم واحد. فكر فيه كملف شخصي أو بطاقة تعريف رقمية. 🪪

الكائن يتكون من أزواج من المفتاح والقيمة (Key-Value Pairs). المفتاح (Key) هو اسم الخاصية (مثل name)، والقيمة (Value) هي البيانات المخزنة (مثل "Ahmed").

🔨 كيف ننشئ كائناً في الجافاسكريبت؟

هناك طريقتان رئيسيتان لإنشاء كائن، وسنبدأ بالأبسط والأكثر استخداماً.

الطريقة الأولى: الأقواس المعقوفة {} (Object Literal)

هي الطريقة المباشرة والأكثر شيوعاً لإنشاء كائن. نكتب الخصائص والقيم مباشرة داخل الأقواس {}.

// إنشاء كائن طالب باستخدام الأقواس المعقوفة
let student = {
    name: "Ahmed",
    age: 20,
    major: "Software Engineering",
    isActive: true
};

console.log(student); // Print it

الطريقة الثانية: الكلمة المفتاحية new Object()

هذه طريقة أقدم، ولكن من المهم معرفتها. تعمل بنفس الطريقة تقريباً.

// إنشاء كائن طالب باستخدام new Object()
let car = new Object();
car.brand = "Toyota";
car.model = "Camry";
car.year = 2022;

console.log(car);

💡 نصيحة للمبتدئ: ركز على استخدام الطريقة الأولى ({}) فهي الأسرع كتابة والأوضح.

👁️ كيف نصل إلى خصائص الكائن (القراءة)؟

بعد إنشاء الكائن، نريد غالباً قراءة البيانات المخزنة داخله. لدينا طريقتان للقيام بذلك.

1. استخدام النقطة . (Dot Notation)

هي الطريقة الأبسط والأكثر استخداماً عندما نعرف اسم الخاصية مسبقاً وهو كلمة واحدة.

let book = {
    title: "Learn JavaScript",
    author: "Mohamed Ali",
    pages: 300
};

// الوصول إلى الخصائص باستخدام النقطة
console.log(book.title); // الناتج: "Learn JavaScript"
console.log(book.author); // الناتج: "Mohamed Ali"

let bookTitle = book.title; // تخزين قيمة الخاصية في متغير جديد
console.log("Book Title: " + bookTitle);

2. استخدام الأقواس المربعة [] (Bracket Notation)

نستخدمها عندما يكون اسم الخاصية يحتوي على مسافات أو شرطات، أو عندما نريد استخدام قيمة متغير كمفتاح.

let user = {
    "full name": "Sarah Abdullah",
    "country-code": "+966"
};

// لا يمكن استخدام النقطة هنا لأن الاسم به مسافة
// console.log(user.full name); // هذا سيعطي خطأ

// الحل: استخدام الأقواس المربعة
console.log(user["full name"]); // الناتج: "Sarah Abdullah"
console.log(user["country-code"]); // الناتج: "+966"

// مثال باستخدام متغير كمفتاح
let propertyKey = "country-code";
console.log(user[propertyKey]); // الناتج: "+966"

✏️ كيف نعدل على كائن موجود أو نضيف خصائص جديدة؟

الكائنات في الجافاسكريبت مرنة جداً! يمكنك تحديث قيم الخصائص الحالية أو إضافة خصائص جديدة تماماً بعد إنشاء الكائن.

تحديث قيمة خاصية موجودة

let smartphone = {
    brand: "Samsung",
    model: "Galaxy A12",
    price: 900
};

console.log("Old Price: " + smartphone.price); // 900

// تحديث قيمة خاصية موجودة
smartphone.price = 750; // غيرنا السعر إلى 750
smartphone.model = "Galaxy A13"; // غيرنا الموديل

console.log("New Price: " + smartphone.price); // 750
console.log(smartphone);

إضافة خاصية جديدة للكائن

let course = {
    name: "Learn JavaScript",
    duration: "4 weeks"
};

// إضافة خاصيتين جديدتين لم تكن موجودة من قبل
course.instructor = "Fatima";
course.isCompleted = false;

console.log(course);
// الآن الكائن يحتوي على: name, duration, instructor, isCompleted

🗑️ كيف نحذف خاصية من الكائن؟

ماذا لو أردت إزالة معلومة من الكائن؟ نستخدم عامل التشغيل delete.

let product = {
    id: 101,
    name: "Laptop",
    color: "Silver",
    weight: "2.5kg"
};

console.log(product); // يحتوي على 4 خصائص

// حذف خاصية 'weight' من الكائن
delete product.weight;

console.log(product); // الآن يحتوي على 3 خصائص فقط (id, name, color)
// محاولة الوصول إلى خاصية محذوفة تعطي undefined
console.log(product.weight); // الناتج: undefined

⚙️ الخصائص التي تحتوي على دوال (Methods)

الخاصية في الكائن لا تحتوي فقط على بيانات مثل النصوص أو الأرقام، بل يمكن أن تحتوي على دالة (Function)! عندما تكون الخاصية دالة، نسميها طريقة (Method).

let person = {
    firstName: "Khalid",
    lastName: "Ahmed",
    // هذه خاصية عادية (بيانات)
    birthYear: 1995,
    // هذه خاصية من نوع دالة (Method)
    getFullName: function() {
        // كلمة this تشير إلى الكائن الحالي (person) نفسه
        return this.firstName + " " + this.lastName;
    },
    // طريقة أخرى لحساب العمر
    calculateAge: function() {
        let currentYear = 2024;
        return currentYear - this.birthYear;
    }
};

// استدعاء الدوال (Methods) الموجودة داخل الكائن
console.log(person.getFullName()); // الناتج: "Khalid Ahmed"
console.log("Age: " + person.calculateAge()); // الناتج: "Age: 29"

🎉 تهانينا! لقد تعلمت الأساسيات القوية للكائنات في الجافاسكريبت. أنت الآن تعرف كيف تنشئ كائناً، تصل إلى بياناته، تعدلها، تضيف لها، تحذف منها، وتجعلها تنفذ عمليات عبر الدوال (Methods).