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

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

  • ابدأ تدريجيًا: لا تترك وظيفتك مباشرة. الأفضل أن تبدأ بجانب عملك حتى تبني قاعدة عملاء.
  • وفّر مدخرات: احرص على توفير ما يغطي نفقات 3 إلى 6 أشهر قبل التفرغ الكامل.
  • حدّد تخصصك البرمجي: اختر مجالًا واحدًا تركّز عليه لتميز نفسك.
  • أنشئ حضورًا احترافيًا: ملفك على المنصات يجب أن يعكس مهاراتك وخبراتك.
  • تعلم اللغة الإنجليزية: أساسية للمنصات العالمية، لكن يمكنك البدء بالمنصات العربية إن كانت لغتك ضعيفة.
  • استفد من المجتمعات التقنية: استشارة المبرمجين ذوي الخبرة تسرّع من تطورك.
  • إتقان لغات مثل JavaScript، Python، Java.
  • معرفة أطر العمل مثل React وDjango.
  • استخدام أدوات مثل Git لإدارة الشيفرة.

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

  • HTML: لهيكلة المحتوى.
  • CSS: لتنسيق التصميم.
  • JavaScript: لإضافة التفاعلات.

HTML هي لغة ترميز تساعدك في إنشاء الهيكل الأساسي لصفحة الويب. إليك الهيكل الأساسي لموقع ويب بسيط:

Sep 27, 2024
Read More
Tutorial
javascript

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

<table border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>الخاصية</th>
      <th><code>var
      let
      const
    
  
  
    
      نطاق المتغير
      نطاق وظيفي أو عام
      نطاق الكتلة
      نطاق الكتلة
    
    
      إعادة التعيين
      يمكن إعادة تعيينه
      يمكن إعادة تعيينه
      لا يمكن إعادة تعيينه
    
    
      إعادة التعريف
      يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
    
    
      رفع المتغير
      نعم، مع قيمة undefined
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
    
    
      ثبات القيمة
      لا
      لا
      نعم
    
  

  • استخدم const عندما تكون متأكدًا أن القيمة لن تتغير بعد التعيين.
  • استخدم let عندما تتوقع أن تتغير قيمة المتغير، خاصة داخل نطاق كتلة (مثل الحلقات أو الشروط).
  • تجنب استخدام var إذا كان ذلك ممكنًا؛ فهو قد يسبب أخطاء بسبب نطاقه العام وسلوكه مع الرفع.

Sep 26, 2024
Read More
Tutorial
javascript

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

  • عند النقر على الزر، سيتم إضافة أو حذف الفئة highlight إلى الفقرة، مما يغير لون الخلفية.

واحدة من أقوى ميزات jQuery هي التعامل مع الأحداث بسهولة. يمكنك استخدام العديد من الأحداث مثل "click"، "hover"، "keyup"، والمزيد.

Sep 26, 2024
Read More
Tutorial
javascript

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

  • استخدام الرسوم المتحركة: يمكنك استخدام CSS أو JavaScript لإضافة حركات انتقال سلسة للعناصر عند التفاعل معها.
  • التفاعل مع API: يمكنك جعل التطبيق يجلب بيانات من خادم باستخدام fetch() وإظهارها على الصفحة.
fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(data => {
        greetingParagraph.textContent = `مرحبًا، ${data.name}!`;
    })
    .catch(error => {
        console.error('حدث خطأ:', error);
    });

Sep 26, 2024
Read More
Tutorial
javascript

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

من خلال هذا الدليل، تعلمنا كيفية تحويل الكائنات إلى JSON باستخدام JSON.stringify()، وكيفية قراءة بيانات JSON باستخدام JSON.parse()، وكذلك كيفية جلب البيانات من API والتعامل مع JSON المعقد.

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

Sep 26, 2024
Read More
Tutorial
javascript

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

for (let i = 0; i < 5; i++) {
    console.log("العدد هو: " + i);
}

الدوال هي مجموعة من التعليمات التي يمكن إعادة استخدامها في أماكن مختلفة من البرنامج.

Sep 26, 2024
Read More
Tutorial
javascript

Understanding JavaScript Classes

JavaScript classes provide a powerful and intuitive way to structure your code using object-oriented principles. By understanding how to use constructors, inheritance, static methods, private fields, and getters/setters, you can write more organized and maintainable code. This tutorial has covered the fundamentals and some advanced features of JavaScript classes, giving you the tools you need to effectively use classes in your projects.

  • Experiment with building your own classes and using inheritance to create complex hierarchies.
  • Explore more advanced class features like mixins and decorators.
  • Consider how classes can improve the organization and scalability of your existing codebase.

Sep 02, 2024
Read More
Tutorial
javascript

Understanding ES6: A Modern JavaScript Tutorial

Array Destructuring:

const [a, b] = [10, 20];
console.log(a); // Output: 10
console.log(b); // Output: 20

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!