المرحلة 0 · الأسبوع 4 · درس تكميلي (0013b) · ~35 دقيقة

Prototype من زاوية تانية — الأنواع والخريطة الكاملة

الدرس ده اتولد بطلبك بعد ما درس 0013 فضل غير واضح — مش هنعدّل فيه، ده درس جديد بطريقة شرح مختلفة تمامًا: بدل التتبع خطوة بخطوة، هنفصل كل "شخصية" في القصة لوحدها الأول (مين هي، شكلها إيه، فرقها عن الباقيين)، وبعدين نرسم الخريطة اللي بتربطهم ببعض.

١ — قبل أي حاجة: 4 شخصيات مختلفة، مش 2

أكبر سبب للّخبطة في الموضوع ده إن الناس بتفكر في "حاجتين": الدالة والـ instance. الحقيقة فيه 4 حاجات مختلفة، وكل واحدة فيهم نوعها مختلف عن التانية. خليك معايا نعرّفهم واحد واحد قبل ما نربط بينهم:

Function (دالة) Object عادي Instance (اتعمل بـ new)

الشخصية	مثال	نوعها إيه؟	عندها property اسمها `.prototype`؟	[[Prototype]] الداخلي بتاعها بيشاور على إيه؟
Constructor Function	`Person`	function	✅ أيوه	`Function.prototype`
الـ .prototype بتاعها	`Person.prototype`	object عادي	❌ لأ	`Object.prototype`
Instance (اتعمل بـ new)	`p1 = new Person()`	object	❌ لأ	`Person.prototype`
Object عادي (literal)	`{}`	object	❌ لأ	`Object.prototype`

✓ كل خانة في الجدول ده متحقق منها بتشغيل Node.js فعلي (2026-09-20) — التفاصيل في الأقسام الجاية.

٢ — الغلطة الشائعة اللي بتلخبط كل حد أول مرة

❌ الافتراض الغلط: "p1 اتعملت بـ new Person()، يبقى الـ prototype بتاعها هو Person نفسها."

✅ الحقيقة: الـ prototype بتاع p1 هو Person.prototype — object تاني منفصل الدالة Person بس شايلة رابط ليه. مش Person نفسها.

function Person(name) { this.name = name; }
const p1 = new Person("سارة");

console.log(Object.getPrototypeOf(p1) === Person);
console.log(Object.getPrototypeOf(p1) === Person.prototype);

false
true

✓ متحقق بتشغيل Node.js فعلي (2026-09-20). ده بالظبط سبب اللخبطة: فيه "قفزة" واحدة زيادة (Person → Person.prototype → بعدين p1) مش هوب واحدة مباشرة (Person → p1).

٣ — الخريطة الكاملة (رسمة واحدة بتربط كل حاجة)

دي نفس المعلومات اللي في الجدول، بس مرسومة كعلاقات — تابع الأسهم من فوق لتحت:

constructor function Person

↓ property اسمها .prototype

object عادي (مش instance، مش function) Person.prototype { constructor: Person, greet: ƒ }

↓ [[Prototype]] الداخلي

object جاهز في JS Object.prototype

↓ [[Prototype]] الداخلي

نهاية أي سلسلة — null

ودلوقتي نضيف الـ instances جنب الخريطة دي — لاحظ إنهم بيوصلوا لـ Person.prototype مباشرة (مش لـ Person):

instance ١ p1 { name: "سارة" }

instance ٢ p2 { name: "عمر" }

↓↓ [[Prototype]] الداخلي بتاع الاتنين — نفس الوجهة بالظبط

نفس الـ object اللي فوق Person.prototype

✓ p1.name وp2.name متحققين بـ Node (كل واحد قيمته الخاصة)، وp1.greet === p2.greet بترجع true (نفس الدالة المشتركة على Person.prototype) — تفاصيلها في درس 0013.

٤ — أمثلة تانية عشان الصورة تتعمم (مش بس Person)

نفس الخريطة بالظبط بتتكرر مع أي constructor function — جرّب Array اللي بتستخدمها كل يوم:

const arr = [];
console.log(Object.getPrototypeOf(arr) === Array.prototype);
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype);

true
true

✓ متحقق بتشغيل Node.js فعلي (2026-09-20). أي array بتعمله ([]) هو "instance" ضمنيًا من Array — بالظبط زي p1 كانت instance من Person. عشان كده كل الـ arrays عندها .map(), .filter() — الدوال دي موجودة على Array.prototype، مش متكررة جوه كل array.

وعشان تشوف الفرق: object عادي (literal) ملوش constructor function وسيط خالص — بيوصل لـ Object.prototype على طول:

const plain = {};
console.log(Object.getPrototypeOf(plain) === Object.prototype);

true

✓ متحقق بتشغيل Node.js فعلي (2026-09-20). مفيش خطوة وسيطة زي Person.prototype هنا — الـ object العادي أقصر سلسلة ممكنة.

٥ — الرابط العكسي: `.constructor`

حاجة زيادة تكمّل الصورة: Person.prototype نفسها فيها property اسمها constructor بترجعك لـ Person تاني — يعني تقدر تمشي في الاتجاهين:

console.log(Person.prototype.constructor === Person);

true

✓ متحقق بتشغيل Node.js فعلي (2026-09-20). فاكر: ده رابط تاني منفصل تمامًا عن [[Prototype]] — [[Prototype]] بيودّيك لفوق في السلسلة (لـ Object.prototype)، أما .constructor فبيودّيك لجنب (رجوع للدالة اللي بنتها).

٦ — اختبر نفسك على الخريطة

س1: const p1 = new Person() — الـ [[Prototype]] الداخلي بتاع p1 بيشاور على إيه؟

س2: أنهي واحدة من دول عندها property اسمها .prototype؟

س3: Person.prototype نفسها — نوعها إيه؟

س4: [] (array فاضية) — سلسلة الـ prototype بتاعتها بترتيب صح؟

٧ — لخّصها بنفسك (بدون كود)

من غير ما ترجع تشوف الخريطة فوق: اكتب بكلامك — إيه الفرق بين Person وPerson.prototype وp1؟ (3 أسطر بس، كل سطر لواحد منهم). ابعتهملي وهراجعهم معاك.