DeveloperBreeze

البرمجة الكائنية (OOP) في JavaScript: المفاهيم الأساسية والتطبيقات

البرمجة الكائنية (Object-Oriented Programming - OOP) هي نمط برمجي قوي يستخدم لهيكلة الكود بطريقة تعتمد على الكائنات. في JavaScript، على الرغم من أنها كانت تعتبر لغة تعتمد على النماذج (prototype-based) في الأصل، إلا أنها تدعم الآن البرمجة الكائنية بشكل كامل باستخدام الفئات (Classes) منذ إصدار ES6.

في هذا الدليل، سنتعرف على الأساسيات والمفاهيم الأساسية للبرمجة الكائنية في JavaScript، وسنرى كيف يمكن استخدامها لبناء تطبيقات متقدمة وقابلة للتطوير.


1. ما هي البرمجة الكائنية (OOP)؟

البرمجة الكائنية هي نمط برمجي يعتمد على الكائنات. الكائن هو تمثيل لشيء ما في العالم الحقيقي يحتوي على خصائص (properties) وسلوكيات (methods). يُعتمد في OOP على إنشاء كائنات تقوم بتمثيل البيانات وتطبيق السلوكيات، مما يسهل إدارة البرامج الكبيرة.

المفاهيم الرئيسية في OOP هي:

  1. الكائنات (Objects): الوحدات الأساسية التي تحتوي على بيانات وسلوكيات.
  2. الفئات (Classes): القوالب التي تُستخدم لإنشاء كائنات.
  3. التغليف (Encapsulation): تجميع البيانات والسلوكيات داخل الكائن.
  4. الوراثة (Inheritance): إمكانية إنشاء كائنات جديدة بناءً على كائنات أخرى.
  5. تعدد الأشكال (Polymorphism): القدرة على استخدام الكائنات بطرق مختلفة بناءً على سياقها.

2. الفئات (Classes) في JavaScript

الفئات هي القوالب التي نستخدمها لإنشاء الكائنات. في السابق، كانت JavaScript تعتمد على النماذج (prototypes) لإنشاء الكائنات، لكن منذ ES6، أصبحت الفئات (classes) جزءًا من اللغة.

مثال على تعريف فئة:

class Car {
    constructor(brand, model, year) {
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    startEngine() {
        console.log(`${this.brand} ${this.model} قد بدأ تشغيل المحرك!`);
    }

    stopEngine() {
        console.log(`${this.brand} ${this.model} قد أوقف تشغيل المحرك.`);
    }
}

const myCar = new Car("Toyota", "Corolla", 2020);
myCar.startEngine();  // Toyota Corolla قد بدأ تشغيل المحرك!

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

الكائن هو نسخة من الفئة (class). في المثال السابق، myCar هو كائن تم إنشاؤه من الفئة Car. يحتوي على الخصائص (brand, model, year) ويمكنه تنفيذ السلوكيات (startEngine, stopEngine).

الوصول إلى خصائص الكائن:

console.log(myCar.brand);  // Toyota
console.log(myCar.model);  // Corolla
console.log(myCar.year);   // 2020

4. التغليف (Encapsulation)

التغليف هو عملية إخفاء تفاصيل التنفيذ الداخلية للكائن عن العالم الخارجي. يمكن تحقيق ذلك في JavaScript باستخدام الفئات والفئات الخاصة (private classes).

مثال على التغليف:

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this._balance = balance;  // خاص
    }

    deposit(amount) {
        if (amount > 0) {
            this._balance += amount;
            console.log(`تم إضافة ${amount} إلى الحساب.`);
        }
    }

    getBalance() {
        return this._balance;
    }
}

const account = new BankAccount("علي", 1000);
account.deposit(500);
console.log(account.getBalance());  // 1500

في هذا المثال، خاصية _balance مخفية ولا يمكن الوصول إليها مباشرة من خارج الفئة.

5. الوراثة (Inheritance)

الوراثة هي مفهوم يسمح لك بإنشاء فئات جديدة بناءً على فئات موجودة. الفئة المشتقة (subclass) ترث الخصائص والأساليب من الفئة الأساسية (superclass).

مثال على الوراثة:

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} يصدر صوتًا.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} ينبح!`);
    }
}

const myDog = new Dog("بلاك");
myDog.speak();  // بلاك ينبح!

6. تعدد الأشكال (Polymorphism)

تعدد الأشكال يعني أن الكائنات يمكن أن تستجيب بطرق مختلفة بناءً على السياق. في المثال السابق، speak() تم تعريفها بشكل مختلف في فئة Dog، على الرغم من أنها ورثت من الفئة Animal.


7. التطبيقات العملية للبرمجة الكائنية

بناء نظام إدارة مستخدمين:

يمكنك استخدام OOP لبناء أنظمة معقدة مثل إدارة المستخدمين، حيث يمكن تعريف فئة User تتضمن الخصائص الأساسية مثل الاسم والبريد الإلكتروني، ويمكن للفئات المشتقة أن تمثل أنواعًا مختلفة من المستخدمين مثل Admin أو Customer.

مثال:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    login() {
        console.log(`${this.name} قام بتسجيل الدخول.`);
    }
}

class Admin extends User {
    deleteUser(user) {
        console.log(`تم حذف المستخدم ${user.name}.`);
    }
}

const user1 = new User("أحمد", "ahmed@example.com");
const admin = new Admin("علي", "ali@example.com");

user1.login();  // أحمد قام بتسجيل الدخول.
admin.deleteUser(user1);  // تم حذف المستخدم أحمد.

8. الخاتمة

البرمجة الكائنية (OOP) في JavaScript تمنحك القدرة على كتابة كود أكثر تنظيماً وقابلية للصيانة. من خلال الفئات، الكائنات، التغليف، الوراثة، وتعدد الأشكال، يمكنك بناء تطبيقات معقدة بطريقة سهلة ومبسطة. OOP هو مفهوم قوي يساعدك في بناء مشاريع متطورة وقابلة للتوسيع مع مرور الوقت.


نصائح إضافية:

  1. تجربة الكود: قم بتجربة كتابة الكائنات والفئات بنفسك لفهم أعمق.
  2. قراءة المشاريع المفتوحة المصدر: ابحث عن مشاريع مفتوحة المصدر تعتمد على OOP في JavaScript للتعلم من أمثلة واقعية.
  3. استمر في التطور: البرمجة الكائنية هي أحد الأنماط البرمجية، لذا استمر في التعلم عن باقي الأنماط والأنماط البرمجية الأخرى.

Related Posts

More content you might like

Article

العمل الحر والربح من البرمجة

  • التواصل الجيد مع العملاء.
  • تنظيم الوقت وتسليم المشاريع في الموعد.
  • التعلُّم المستمر.
  • الانضباط والمصداقية.
  • Upwork: أكبر منصة عمل حر بمشاريع متنوعة.
  • Freelancer.com: تضم ملايين المستخدمين ومشاريع كثيرة.
  • Fiverr: مناسبة للخدمات السريعة بأسعار محددة.
  • Toptal: مخصصة للخبراء والمحترفين.
  • Guru و PeoplePerHour: منصات أخرى تقدم فرصًا متنوعة.

Mar 29, 2025
Read More
Tutorial
javascript

History and Evolution

JavaScript is one of the core technologies of the web, alongside HTML and CSS. Here’s a brief overview of its history:

  • Created by Brendan Eich in just 10 days while working at Netscape.
  • Originally named Mocha, then renamed LiveScript, and finally JavaScript to ride the popularity wave of Java.

Dec 10, 2024
Read More
Article
javascript

20 Useful Node.js tips to improve your Node.js development skills:

No preview available for this content.

Oct 24, 2024
Read More
Tutorial
javascript css +1

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    alert('تم إرسال رسالتك بنجاح!');
});
  • قمنا بربط حدث submit للنموذج. عند الضغط على زر "إرسال"، يتم إظهار رسالة تنبيه باستخدام alert() دون إعادة تحميل الصفحة.

Sep 27, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!