Prototype: السر وراء الخصائص الموروثة في JavaScript

هل سبق وأن أنشأت object بسيط في JavaScript، وعند استعراضه في الـ console وجدت خصائص وmethods لم تكتبها بنفسك؟

مثلا:

const user = { name: "Atimos" };

console.log(user); 

سترى شيء كهذا:

ويمكنك استخدامها مباشرة:

إذا، من أين جاءت هذه الخصائص؟ وما هو الـ Prototype؟

👈 في JavaScript، كل object مرتبط ب object آخر يعرف باسم prototype.

هذا الارتباط يُشكّل ما يعرف بـ prototype chain، وهي السلسلة التي يستخدمها محرك JavaScript للبحث عن الخصائص والدوال (methods) داخل ال object.

🔸بمعنى :

عند إنشاء هذا الـ object

يتم ربطه تلقائيا بـ Object.prototype، وهو النموذج الأساسي (prototype) لجميع objects في JavaScript.

وObject.prototype يحتوي مسبقا على العديد من methods الجاهزة، مثل:

toString()

hasOwnProperty()

valueOf()

🔸لذلك عند كتابة:

user.toString();

يقوم JavaScript بالبحث:

هل toString موجودة داخل user؟ لا

هل موجودة في الـ prototype المرتبط به (Object.prototype)؟ ✔ نعم

وهكذا تعمل الوراثة عن طريق الـ prototype.

👈 الفرق بين prototype و proto

عند إنشاء object، يتم ربطه داخليًا بـ prototype من خلال خاصية تعرف باسم [[Prototype]]. في أغلب المتصفحات يمكن رؤيتها باستخدام proto:

console.log(uprototo__ === Object.prototype); // true

وإذا تتبعت السلسلة أكثر:

console.log(uprototprototo__); // null

هذا يعني أن Object.prototype هو نهاية السلسلة (root prototype).

👈الـ arrays هي أيضا objects

نعم! حتى الـ array مثل:

const nums = [1, 2, 3];

هي نوع خاص من الـ object في JavaScript.

ولهذا السبب يمكنك استخدام methods مثل:

nums.forEach(...)

nums.filter(...)

nums.map(...)

هذه الـ methods ليست معرفة داخل nums نفسه، بل موروثة من Array.prototype.

console.log(nprototo__ === Array.prototype); // true

والمفاجأة؟

Array.prototype نفسه يرث من Object.prototype.

يعني أن الـ array هي جزء من نفس prototype chain.

ويمكنك إثبات ذلك:

console.log(nums.hasOwnProperty("length")); // true

console.log(nums.toString()); // يعمل أيضًا!

كل هذا ممكن لأن الـ array هي مجرد object في الأساس.