هل سبق وأن أنشأت object بسيط في JavaScript، وعند استعراضه في الـ console وجدت خصائص وmethods لم تكتبها بنفسك؟
مثلا:
const user = { name: "Atimos" };
console.log(user);
سترى شيء كهذا:
ويمكنك استخدامها مباشرة:
javascript
console.log(user.hasOwnProperty("name")); // trueإذا، من أين جاءت هذه الخصائص؟ وما هو الـ Prototype؟
👈 في JavaScript، كل object مرتبط ب object آخر يعرف باسم prototype.
هذا الارتباط يُشكّل ما يعرف بـ prototype chain، وهي السلسلة التي يستخدمها محرك JavaScript للبحث عن الخصائص والدوال (methods) داخل ال object.
🔸بمعنى :
عند إنشاء هذا الـ object
يتم ربطه تلقائيا بـ Object.prototype، وهو النموذج الأساسي (prototype) لجميع objects في JavaScript.
وObject.prototype يحتوي مسبقا على العديد من methods الجاهزة، مثل:
text
toString()text
hasOwnProperty()text
valueOf()🔸لذلك عند كتابة:
user.toString();
يقوم JavaScript بالبحث:
هل toString موجودة داخل user؟ لا
هل موجودة في الـ prototype المرتبط به (Object.prototype)؟ ✔ نعم
وهكذا تعمل الوراثة عن طريق الـ prototype.
👈 الفرق بين prototype و proto
عند إنشاء object، يتم ربطه داخليًا بـ prototype من خلال خاصية تعرف باسم [[Prototype]]. في أغلب المتصفحات يمكن رؤيتها باستخدام proto:
javascript
console.log(uprototo__ === Object.prototype); // trueوإذا تتبعت السلسلة أكثر:
javascript
console.log(uprototprototo__); // nullهذا يعني أن Object.prototype هو نهاية السلسلة (root prototype).
👈الـ arrays هي أيضا objects
نعم! حتى الـ array مثل:
javascript
const nums = [1, 2, 3];هي نوع خاص من الـ object في JavaScript.
ولهذا السبب يمكنك استخدام methods مثل:
text
nums.forEach(...)text
nums.filter(...)text
nums.map(...)هذه الـ methods ليست معرفة داخل nums نفسه، بل موروثة من Array.prototype.
javascript
console.log(nprototo__ === Array.prototype); // true
والمفاجأة؟
Array.prototype نفسه يرث من Object.prototype.
يعني أن الـ array هي جزء من نفس prototype chain.
ويمكنك إثبات ذلك:
javascript
console.log(nums.hasOwnProperty("length")); // truejavascript
console.log(nums.toString()); // يعمل أيضًا!كل هذا ممكن لأن الـ array هي مجرد object في الأساس.
👈 خلاصة
🔸 كل object في JavaScript مرتبط بـ prototype
🔸الـ prototype يحتوي على خصائص و methods جاهزة
🔸 إذا لم يجد JavaScript الخاصية المطلوبة، يبحث عنها في prototype chain
🔸هذه هي الطريقة التي تعمل بها الوراثة في JavaScript