0Pricing
JavaScript Academy · درس

صياغة Class (معاينة): constructor وmethods وstatic وextends

ألقوا نظرة مبسطة على صياغة class: ‏constructor وطرق الكائن وhelpers ثابتة والوراثة البسيطة باستخدام extends

صياغة Class (معاينة): constructor وmethods وstatic وextends درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 2. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 2 دروس في المجموع.

مقدمة إلى صياغة class

الهدف: تعرّفوا إلى كيفية ارتباط صياغة class بالنماذج الأولية.

  • constructor للإعداد
  • الأساليب في النموذج الأولي
  • مساعدات static في الصنف
  • extends للتوريث البسيط
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 1

constructor والأسلوب

يُنفَّذ constructor عند استخدام new. وتتشارك جميع النسخ الأساليب الموجودة في جسم الصنف عبر النموذج الأولي.

// Class with a constructor and an instance method
class Counter {
  constructor(start = 0) {
    // Initialize fields
    this.value = start;
  }

  // Instance method (lives on the prototype)
  inc() {
    this.value = this.value + 1;
    console.log("Now:", this.value);
  }
}

const c = new Counter(1);
c.inc();
c.inc();
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 2

مشاركة النموذج الأولي

تُعد أساليب النسخ في صياغة class أساليب للنموذج الأولي، ولذلك يُعاد استخدام الدالة نفسها.

// Prototype sharing demo
class Greeter {
  say(name) {
    console.log("Hello,", name);
  }
}

const g1 = new Greeter();
const g2 = new Greeter();

// Same function reference for both instances
console.log("Same method?", g1.say === g2.say);
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 3

أساسيات الأساليب static

يُستدعى أسلوب static على الصنف نفسه، وليس على النسخ.

// Static method: lives on the class, not instances
class MathBox {
  static double(n) {
    return n * 2;
  }
}

console.log("Static call:", MathBox.double(4));

const m = new MathBox();
// @ts-ignore (conceptually): next line would be undefined in JS
console.log("Instance has static?", typeof m.double);
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 4

التوريث البسيط

يُنشئ extends سلسلة النموذج الأولي؛ استخدموا super لاستدعاء أسلوب الصنف الأب.

// Inheritance with extends and super
class Animal {
  speak() {
    console.log("...");
  }
}

class Dog extends Animal {
  speak() {
    // Optionally call parent method
    super.speak();
    console.log("Woof");
  }
}

const d = new Dog();
d.speak();
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 5

نصائح لاستخدام الأصناف

نصائح:

  • اجعلوا الأصناف صغيرة: بضعة حقول وأساليب فقط.
  • فضّلوا أساليب النسخ داخل جسم الصنف، إذ تتم مشاركتها عبر النموذج الأولي.
  • استخدموا static للمساعدات الخالصة غير المرتبطة بنسخة.
صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 6

اختبار موضع أساليب الصنف

تحقق سريع: موضع الأسلوب المشترك.

صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 7

مراجعة

مراجعة: أنشأتم صنفًا باستخدام constructor، وكتبتم أساليب مشتركة للنسخ، وأضفتم مساعدًا static، ووسّعتم صنفًا أساسيًا باستخدام super.

صياغة Class (معاينة): constructor وmethods وstatic وextends — رسم توضيحي 8

الأسئلة الشائعة

هل درس «صياغة Class (معاينة): constructor وmethods وstatic وextends» مجاني؟

نعم — نص درس «صياغة Class (معاينة): constructor وmethods وstatic وextends» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 2 دروس في المجموع.

ماذا ستتعلم في «صياغة Class (معاينة): constructor وmethods وstatic وextends»؟

ألقوا نظرة مبسطة على صياغة class: ‏constructor وطرق الكائن وhelpers ثابتة والوراثة البسيطة باستخدام extends تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 2.

كم من الوقت يستغرق درس «صياغة Class (معاينة): constructor وmethods وstatic وextends»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

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

جميع الدروس في هذه الدورة

  1. سلسلة النماذج الأولية وأساسيات الخصائص الخاصة
  2. صياغة Class (معاينة): constructor وmethods وstatic وextends
← العودة إلى JavaScript Academy