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

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

  • استخدم منصات مثل GitHub Pages أو موقعك الشخصي.
  • اعرض أفضل أعمالك بتنوع يُظهر مهاراتك.
  • أضف وصفًا لكل مشروع يشرح التحديات والحلول.
  • أدرج شهادات العملاء إن أمكن.
  • حدّث المعرض دوريًا وأضف المشاريع الجديدة.
  • أنشئ ملفًا جذّابًا ومتكاملًا على المنصة.
  • حسّن ظهورك عبر الكلمات المفتاحية.
  • قدّم عروضًا مخصصة لكل مشروع.
  • استهدف مشاريع بتنافسية منخفضة.
  • استخدم السعر التنافسي لجذب العملاء الأوائل.
  • استفد من معارفك الشخصية للحصول على فرص أولية.
  • ثابر وراجع استراتيجيتك باستمرار.

Mar 29, 2025
Read More
Tutorial
javascript

History and Evolution

  • 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.
  • JavaScript was standardized under the name ECMAScript by ECMA International.
  • The first edition of ECMAScript (ES1) laid the foundation for modern JavaScript.

Dec 10, 2024
Read More
Article
javascript

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

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

These Node.js tips will help you write more robust, secure, and efficient Node.js applications and improve your development workflow.

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
Tutorial
javascript

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

const myArray = [1, 2, 3];
myArray.push(4); // يمكن تعديل المصفوفة
console.log(myArray); // [1, 2, 3, 4]

const myObject = { name: "John" };
myObject.age = 30; // يمكن تعديل خصائص الكائن
console.log(myObject); // { name: "John", age: 30 }
<table border="1" cellpadding="10" cellspacing="0">
  <thead>
    <tr>
      <th>الخاصية</th>
      <th><code>var
      let
      const
    
  
  
    
      نطاق المتغير
      نطاق وظيفي أو عام
      نطاق الكتلة
      نطاق الكتلة
    
    
      إعادة التعيين
      يمكن إعادة تعيينه
      يمكن إعادة تعيينه
      لا يمكن إعادة تعيينه
    
    
      إعادة التعريف
      يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
      لا يمكن إعادة تعريفه
    
    
      رفع المتغير
      نعم، مع قيمة undefined
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
      نعم، لكن لا يمكن الوصول إليه قبل التعيين
    
    
      ثبات القيمة
      لا
      لا
      نعم
    
  

Sep 26, 2024
Read More
Tutorial
javascript

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

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على jQuery</title>
</head>
<body>

    <h1>مرحبًا بك!</h1>
    <button id="myButton">انقر هنا</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // تحديد الزر والتفاعل معه
        $('#myButton').click(function() {
            alert('تم النقر على الزر!');
        });
    </script>
</body>
</html>

شرح الكود:

Sep 26, 2024
Read More
Tutorial
javascript

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

بإمكانك إضافة المزيد من التفاعلية إلى التطبيق، مثل:

  • استخدام الرسوم المتحركة: يمكنك استخدام CSS أو JavaScript لإضافة حركات انتقال سلسة للعناصر عند التفاعل معها.
  • التفاعل مع API: يمكنك جعل التطبيق يجلب بيانات من خادم باستخدام fetch() وإظهارها على الصفحة.

Sep 26, 2024
Read More
Tutorial
javascript

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

عند إرسال بيانات من الواجهة الأمامية إلى الخادم، يتم عادة تحويل البيانات إلى تنسيق JSON.

التعامل مع JSON هو جزء أساسي من تطوير تطبيقات الويب الحديثة. سواء كنت تحتاج إلى جلب البيانات من API أو كتابة بيانات إلى خادم، فإن فهم كيفية قراءة وكتابة JSON سيساعدك في بناء تطبيقات قوية وقابلة للتوسيع.

Sep 26, 2024
Read More
Tutorial
javascript

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

الجمل الشرطية تمكنك من تنفيذ أجزاء معينة من الكود بناءً على شروط معينة.

let temperature = 30;

if (temperature > 25) {
    console.log("الجو حار.");
} else {
    console.log("الجو معتدل.");
}

Sep 26, 2024
Read More
Tutorial
javascript

Understanding JavaScript Classes

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // Output: 8

As of ECMAScript 2022, JavaScript supports private fields and methods, which are not accessible outside of the class definition. This is done by prefixing the field or method name with #.

Sep 02, 2024
Read More
Tutorial
javascript

Understanding ES6: A Modern JavaScript Tutorial

const iterable = {
    [Symbol.iterator]: function* () {
        yield 1;
        yield 2;
        yield 3;
    },
};

for (const value of iterable) {
    console.log(value); // Output: 1 2 3
}

Generator Function Example:

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!