DeveloperBreeze

البرمجة الكائنية (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. استمر في التطور: البرمجة الكائنية هي أحد الأنماط البرمجية، لذا استمر في التعلم عن باقي الأنماط والأنماط البرمجية الأخرى.

Continue Reading

Discover more amazing content handpicked just for you

Article

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

  • إتقان لغات مثل JavaScript، Python، Java.
  • معرفة أطر العمل مثل React وDjango.
  • استخدام أدوات مثل Git لإدارة الشيفرة.
  • التواصل الجيد مع العملاء.
  • تنظيم الوقت وتسليم المشاريع في الموعد.
  • التعلُّم المستمر.
  • الانضباط والمصداقية.

Mar 29, 2025
Read More
Tutorial
javascript

History and Evolution

No preview available for this content.

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

  • قمنا بربط حدث submit للنموذج. عند الضغط على زر "إرسال"، يتم إظهار رسالة تنبيه باستخدام alert() دون إعادة تحميل الصفحة.
  • قم بإنشاء ملفات index.html، styles.css وscripts.js.
  • احفظهم في نفس المجلد.

Sep 27, 2024
Read More
Tutorial
javascript

الفرق بين let و const و var في JavaScript

var x = 5;
if (true) {
    var x = 10; // إعادة تعريف x
    console.log(x); // 10
}
console.log(x); // 10 (الـ var تم تعريفه بالنطاق العام)
  • نطاق الوظيفة: المتغيرات التي يتم تعريفها باستخدام var تكون مرتبطة بالوظيفة إذا كانت داخل دالة، أو تصبح عامة إذا كانت خارج أي دالة.
  • رفع المتغير (Hoisting): المتغيرات المُعلنة باستخدام var يتم رفعها إلى أعلى النطاق الوظيفي أو العام قبل تنفيذ الكود. أي يمكن استخدام المتغير قبل أن يتم إعلانه، لكنه سيعطى قيمة undefined.

Sep 26, 2024
Read More
Tutorial
javascript

مكتبة jQuery: استخدام JavaScript بسهولة وفعالية

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

يمكنك أيضًا تنزيل jQuery واستضافة الملف محليًا في مشروعك:

Sep 26, 2024
Read More
Tutorial
javascript

كيفية بناء تطبيقات تفاعلية باستخدام JavaScript و HTML و CSS

fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(data => {
        greetingParagraph.textContent = `مرحبًا، ${data.name}!`;
    })
    .catch(error => {
        console.error('حدث خطأ:', error);
    });

من خلال الجمع بين HTML، CSS، و JavaScript، يمكنك بناء تطبيقات ويب تفاعلية بسهولة. يتفاعل التطبيق مع المستخدم بناءً على مدخلاته، ويقوم بعرض المعلومات المناسبة. هذا الدليل قدم لك أساسيات بناء تطبيق بسيط، ولكن يمكنك توسيع المفاهيم لتشمل ميزات أكثر تعقيدًا، مثل التعامل مع API، الحركات، وإدارة البيانات.

Sep 26, 2024
Read More
Tutorial
javascript

التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها

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

{
    "name": "أحمد",
    "address": {
        "city": "الرياض",
        "postalCode": "12345"
    },
    "skills": ["برمجة", "تصميم", "تحليل"]
}

Sep 26, 2024
Read More
Tutorial
javascript

دليل للمبتدئين في JavaScript: تعلم الأساسيات

JavaScript هي واحدة من أكثر لغات البرمجة شيوعًا اليوم. تُستخدم بشكل واسع في تطوير الويب لجعل المواقع ديناميكية وتفاعلية. إذا كنت مبتدئًا في البرمجة وترغب في تعلم JavaScript، فهذا الدليل سيأخذك عبر الأساسيات خطوة بخطوة.

JavaScript هي لغة برمجة تعمل في المتصفح وتسمح لك بإضافة سلوك تفاعلي إلى صفحات الويب. على سبيل المثال، يمكنك استخدام JavaScript لتحريك الصور، التحقق من صحة النماذج، أو حتى بناء تطبيقات ويب كاملة.

Sep 26, 2024
Read More
Tutorial
javascript

Understanding JavaScript Classes

Methods can be added to a class by defining functions within the class body. These methods become part of the prototype and are shared among all instances of the class.

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal('Dog', 'Buddy');
dog.speak(); // Output: Buddy makes a noise.

Sep 02, 2024
Read More
Tutorial
javascript

Understanding ES6: A Modern JavaScript Tutorial

Example:

let name = "Alice";
name = "Bob"; // No error, name can be reassigned

Aug 30, 2024
Read More
Code
javascript json

JavaScript Code Snippet: Fetch and Display Data from an API

No preview available for this content.

Aug 04, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!