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

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

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

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

  • يحتوي هذا الملف على الهيكل الأساسي لصفحة الويب. يبدأ بـ <!DOCTYPE html> والذي يعرّف نوع المستند.
  • داخل الـ<head> قمنا بتضمين معلومات مثل ترميز الصفحة (UTF-8) والعنوان (<title>).
  • يحتوي <body> على الأقسام المختلفة للموقع مثل العنوان (header)، الأقسام المختلفة (section) وfooter.
  • استخدمنا أيضًا عنصر <form> لإدخال بيانات الزوار.

الآن بعد أن قمنا بإنشاء الهيكل، سنقوم بإضافة بعض التنسيقات باستخدام CSS. سنقوم بإنشاء ملف يسمى styles.css يحتوي على التالي:

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 بسهولة وفعالية

jQuery هي مكتبة JavaScript خفيفة الوزن تساعد في تبسيط التعامل مع الـ DOM (Document Object Model)، التلاعب بالعناصر، إدارة الأحداث، والتحكم في التأثيرات المرئية بطريقة سهلة وسلسة. تم تصميم jQuery لجعل JavaScript أكثر سهولة وفعالية، خصوصًا للمطورين المبتدئين أو لأولئك الذين يرغبون في تجنب كتابة كود JavaScript طويل ومعقد.

في هذا الدليل، سنتعرف على الأساسيات وكيفية استخدام jQuery للتفاعل مع عناصر HTML، التعامل مع الأحداث، وإضافة التأثيرات.

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: قراءة البيانات وكتابتها

يمكنك تخزين بيانات المستخدم محليًا في المتصفح باستخدام localStorage أو sessionStorage عن طريق تحويل الكائنات إلى JSON.

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

Sep 26, 2024
Read More
Tutorial
javascript

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

JavaScript يمكنها التفاعل مع HTML وتغيير المحتوى أو النمط. هذه هي الطريقة التي تجعل بها صفحات الويب ديناميكية.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM في JavaScript</title>
</head>
<body>
    <h1 id="myHeading">مرحبًا بك!</h1>

    <script>
        document.getElementById("myHeading").innerText = "تم تغيير العنوان!";
    </script>
</body>
</html>

Sep 26, 2024
Read More
Tutorial
javascript

Understanding JavaScript Classes

class Book {
  constructor(title, author, isbn) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
  }

  getDetails() {
    return `${this.title} by ${this.author} (ISBN: ${this.isbn})`;
  }
}

class Library {
  constructor() {
    this.books = [];
  }

  addBook(book) {
    this.books.push(book);
  }

  removeBook(isbn) {
    this.books = this.books.filter(book => book.isbn !== isbn);
  }

  listBooks() {
    return this.books.map(book => book.getDetails()).join('\n');
  }
}

const library = new Library();
const book1 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', '9780743273565');
const book2 = new Book('1984', 'George Orwell', '9780451524935');

library.addBook(book1);
library.addBook(book2);
console.log(library.listBooks());
// Output:
// The Great Gatsby by F. Scott Fitzgerald (ISBN: 9780743273565)
// 1984 by George Orwell (ISBN: 9780451524935)

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.

Sep 02, 2024
Read More
Tutorial
javascript

Understanding ES6: A Modern JavaScript Tutorial

Basic Example:

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!

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!