0Pricing
JavaScript Academy · درس

Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة

أعيدوا استخدام قدرات صغيرة من دون وراثة عميقة: mixins للكائنات والنماذج الأولية، ومصانع صغيرة، ونصائح أمان بسيطة

Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

لماذا mixins (من ناحية الأسلوب)؟

الهدف: مشاركة قدرات صغيرة دون أشجار وراثة عميقة.

  • كائن mixin يحتوي على methods صغيرة
  • تطبيقه على prototype لصنف
  • أو إضافته إلى كائن واحد عند الحاجة
  • الحفاظ على فرادة الأسماء وصغر الوحدات
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 1

إنشاء mixin

إن mixin مجرد كائن يحتوي على methods لمشاركتها بين الأنواع.

// A simple mixin: adds timestamp helpers
const timeMixin = {
  setCreatedNow: function () {
    this.createdAt = new Date(0); // fixed for demo output
  },
  ageMs: function () {
    if (!this.createdAt) return 0;
    return 1234; // fixed number for a stable demo
  }
};

console.log("mixin keys:", Object.keys(timeMixin));
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 2

mixin على prototype

انسخ methods الخاصة بـ mixin إلى Class.prototype لكي تحصل كل نسخة على هذه القدرة.

// Apply the mixin to all instances via the prototype
class Note {
  constructor(text) {
    this.text = text;
  }
}

// Copy methods to the prototype so every instance can use them
Object.assign(Note.prototype, timeMixin);

const n = new Note("hello");
n.setCreatedNow();
console.log("ageMs:", n.ageMs());
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 3

mixin لنسخة واحدة

استخدم Object.assign(obj, mixin) لإضافة قدرات إلى كائن واحد دون تعديل صنف.

// You can also mix into just one instance
const single = { name: "one" };
Object.assign(single, timeMixin);
single.setCreatedNow();
console.log("single ageMs:", single.ageMs());
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 4

Factory + mixin

يمكن لـ factory صغيرة إنشاء الكائن الأساسي أولًا؛ ثم تدمج معه سلوكًا إضافيًا.

// Factory + mixin: build an object then add abilities
function makeUser(name) {
  return { name: name };
}

const u = makeUser("Ayla");
Object.assign(u, timeMixin);
u.setCreatedNow();
console.log("user ageMs:", u.ageMs());
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 5

عادات جيدة

نصائح:

  • اجعل mixins صغيرة ومركّزة (2–3 methods).
  • تجنّب تعارض الأسماء؛ واختر أسماء methods واضحة.
  • فضّل composition مع mixins على أشجار الأصناف العميقة.
  • اختبر methods المضافة عبر mixin كما تختبر أي دالة.
Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 6

اختبار تطبيق mixin

تحقق سريع: تطبيق mixin على صنف.

Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 7

مراجعة

مراجعة: عرّف mixin object صغيرًا، وانسخه إلى prototype لجميع النسخ (أو إلى كائن واحد)، وأبقِ methods صغيرة لتجنّب التعقيد.

Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة — رسم توضيحي 8

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

هل درس «Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة» مجاني؟

نعم — نص درس «Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة»؟

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

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

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

كم من الوقت يستغرق درس «Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة»؟

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

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

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

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

  1. حقول Class والحقول الخاصة # والأعضاء الثابتة
  2. الوراثة وsuper ومتى نفضّل التركيب
  3. Mixins (لمحة) — إعادة استخدام بسيطة من دون تسلسلات هرمية عميقة
← العودة إلى JavaScript Academy