شرح تفصيلي لنموذج جافا سكريبت الأولي ونقاط معرفة سلسلة النموذج الأولي

1. النموذج الأولي

1. المفهوم

في JavaScript، الوظيفة هي كائن من النوع Function يحتوي على خصائص وطرق. النموذج الأولي (Prototype) هو سمة لكائن نوع Function .

يتم تضمين سمة prototype عند تعريف الوظيفة، وتكون قيمتها الأولية عبارة عن كائن فارغ. لا يوجد نوع نموذج أولي محدد للوظائف في JavaScript، لذلك يمكن أن يكون النموذج الأولي من أي نوع.

يتم استخدام النموذج الأولي لحفظ الخصائص والأساليب المشتركة للكائن . ولا تؤثر خصائص وأساليب النموذج الأولي على خصائص وأساليب الوظيفة نفسها.

// خصائص نوع الوظيفة -> الخصائص التي تحتوي عليها جميع الوظائف console.log(Function.prototype); //[Function]

// تحديد الوظيفة fn() {
    console.log("هذه هي الوظيفة");
}

// القيمة الافتراضية للنموذج الأولي هي الكائن الفارغ console.log(fn.prototype); //fn {};

// تحتوي الدالة على مُنشئ --> جميع أنواع المراجع هي في الواقع مُنشئات console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

2. احصل على النموذج الأولي

للكائن بالطريقتين التاليتين لتعيين الخصائص والأساليب المشتركة:

• من خلال سمة prototype للمنشئ
• ومن خلال getPrototype لطريقة الكائن (obj).

وظيفة الجبهة الوطنية () {
    console.log("هذه هي الوظيفة");
}

// استخدم بنية بناء جملة السمة لكائن الوصول console.log(fn.prototype);
console.log(fn['prototype']);//fn {}

// نوع الكائن يوفر طريقة getPrototypeOf() console.log(Object.getPrototypeOf(fn)); //[Function]

3. فهم سمة المنشئ في النموذج الأولي للوظيفة.

يتم استخدام أسلوب Object.getOwnPropertyDescriptors() للحصول على واصفات كافة خصائص الكائن الخاصة به.

var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) // نتائج الإخراج هي كما يلي:
//{
// القيمة: [الوظيفة: الكائن]،
// قابل للكتابة: صحيح،
// قابل للتعداد: خطأ،
// شكلي: صحيح
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. تعيين الخصائص والأساليب على النموذج الأولي

يمكنك تعيين خصائص وأساليب النموذج الأولي بالطريقتين التاليتين:

• خصائص وأساليب يتم تعريف النموذج الأولي بشكل منفصل.

اسم Constructor.prototype.Attribute = قيمة السمة؛ Constructor.prototype.Method name = function(){};

• تحديد كائن جديد للنموذج الأولي مباشرةً.

عندما نحتاج إلى إضافة العديد من السمات إلى النموذج الأولي، يكون من المزعج جدًا كتابة构造函数.prototype.属性名مرارًا وتكرارًا، يمكننا تعديل prototype بأكمله مباشرةً

buildor.prototype = {.
    اسم السمة: قيمة السمة،
    اسم الطريقة: function(){}}

function foo () {}foo.prototype = {
    المنشئ: فو،
    الاسم: "مربى" ،
    العمر: 18,
    العنوان: 'Beijing'}var fn = new foo()console.log(fn.address) //

طريقة بكين 5.isPrototypeOf()

سيكون لكل كائن طريقة isPrototypeOf() ، والتي تُستخدم لتحديد ما إذا كان الكائن نموذج أولي لكائن آخر.

رمز العينة كما يلي:
// تحديد الكائن من خلال المُهيئ var obj = {
    الاسم: "مربى"
}
// تحديد وظيفة المنشئ Hero() {}
// قم بتعيين الكائن obj إلى النموذج الأولي للمنشئ Hero Hero.prototype = obj;
// إنشاء كائن من خلال المُنشئ var Hero = new Hero();

// تحدد الطريقة isPrototypeOf() ما إذا كان الكائن المحدد هو النموذج الأولي لكائن آخر var result = obj.isPrototypeOf(hero);
console.log(result);// true

يتحقق من أن كائن obj هو النموذج الأولي للكائن hero

2. سلسلة النموذج الأولي

1. فهم سلسلة النموذج الأولي

بعد ذلك نستخدم جزءًا من التعليمات البرمجية لتوسيع فهمنا لسلسلة النموذج الأولي:

السيناريو : ابحث عن الكائنات الموجودة في كائن obj الخطوات التي يتم إجراؤها بواسطة سمة العنوان js:
    1. سيتم تشغيل عملية الحصول 2. ابحث عن السمة في الكائن الحالي 3. إذا لم يتم العثور عليها، فسيتم البحث في كائن سلسلة النموذج الأولي (__proto__) 1. سينتهي البحث إذا لم يتم العثور عليه، فسوف يستمر في البحث على طول سلسلة النموذج الأولي حتى يتم العثور على النموذج الأولي للمستوى الأعلى (ما هو النموذج الأولي للمستوى الأعلى غير واضح مؤقتًا)

1.1 نموذج التعليمات البرمجية كما يلي:

var obj = {.
    الاسم: "مربى" ،
    العمر: 19
}
/* 
    المتطلبات: ابحث عن سمة العنوان في كائن obj*/

// يتم البحث في سلسلة النموذج الأولي طبقة تلو الأخرى، وإذا لم يتم العثور عليه، فسيتم البحث عنه حتى يتم العثور على النموذج الأولي ذي المستوى الأعلى obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    العنوان: "بكين"
}

console.log(obj.address) // بكين console.log(obj.__proto__.__proto__.__proto__) // { العنوان: "بكين" }

1.2 خريطة الذاكرة

وأخيرا العثور على سمة العنوان
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. ما هو النموذج الأولي عالي المستوى؟

كما ذكرنا أعلاه، لن نقوم بالبحث إلى ما لا نهاية على طول سلسلة النموذج الأولي. عندما يتم العثور على النموذج الأولي ذي المستوى الأعلى، سيتم إرجاع undefined إذا لم يتم العثور عليه بعد.

إذن ما هو النموذج الأولي عالي المستوى؟
نموذج التعليمات البرمجية كما يلي:

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

النموذج الأولي للكائن الحرفي الفارغ obj هو: {} . {} هو النموذج الأولي للمستوى الأعلى. عندما نستمر في طباعة __proto__ لأعلى، يتم إرجاع قيمة فارغة، مما يثبت أن الطبقة السابقة هي بالفعل النموذج الأولي للمستوى الأعلى.

الشكل التالي هو ملحق للنموذج الأولي للمستوى الأعلى مفقود في الجزء الأول من الكود:

顶层原型就是Object.prototype

3. النموذج الأولي للكائن (Object.prototype)

3.1 إذن أين نهاية سلسلة النموذج الأولي؟ على سبيل المثال، هل يحتوي الكائن الثالث أيضًا على سمة النموذج الأولي __proto__ ؟

var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

وجدنا أن النتيجة المطبوعة أعلاه هي空对象{}

• في الواقع، هذا النموذج الأولي هو النموذج الأولي ذو المستوى الأعلى لدينا

  var obj = {
    الاسم: "مربى" ،
    العمر: 19
    }
    console.log(obj.__proto__) // {}
    console.log(Object.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) //

  الكائن الحقيقي هو الفئة الأصلية لجميع الفئات، لذا فإن obj.__proto__ هو في الواقع Object.prototype،
  console.log(obj.__proto__ === Object.prototype) // true يمكننا أن نرى أن النتيجة Object.prototype هي النموذج الأولي للمستوى الأعلى.

• النماذج الأولية للكائنات التي تم إنشاؤها مباشرة من Object هي {}

3.2 ثم ​​يمكننا أن نسأل : {} هل هناك أي شيء مميز في النماذج الأولية؟

• النقطة الخاصة 1: يحتوي الكائن على سمة نموذج أولي، لكن سمة النموذج الأولي الخاصة به تشير بالفعل إلى القيمة الخالية، أي أنه النموذج الأولي ذو المستوى الأعلى

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• النقطة الخاصة 2: هناك العديد من الخصائص والأساليب الافتراضية على هذا الكائن؛
  • على الرغم من أن نتيجة طباعة Object.prototype هي كائن فارغ {}، إلا أنه ليس فارغًا، لكن الخصائص الموجودة بداخله غير قابلة للإحصاء، على سبيل المثال، لنطبع constructor خاصية لرؤية

    <!-- يمكن ملاحظة أن هناك سمة منشئة وليست فارغة -->console.log(Object.prototype.constructor) // [Function: Object] <!-- يشير المُنشئ إلى الكائن -->

  • لنا يمكنك أيضًا الحصول على واصفات جميع خصائصه الخاصة في Object.prototype من خلال الأسلوب Object.getOwnPropertyDescriptors() .

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) // كما هو موضح في لقطة الشاشة الطويلة أدناه

    

4. الرسم البياني لذاكرة علاقة السلسلة النموذجية