شرح مفصل لثلاث طرق لفئات تحديد جافا سكريبت (الفصل)

منذ ما يقرب من 20 عامًا ، عندما ولدت JavaScript ، كانت مجرد لغة برمجة على شبكة الإنترنت. إذا نسيت ملء اسم المستخدم الخاص بك ، فسيظهر تحذيرًا.

في الوقت الحاضر ، أصبح الأمر في كل مكان تقريبًا ، مع جميع أنواع الاستخدامات المذهلة من الواجهة الأمامية إلى النهاية الخلفية. يستخدم المبرمجون ذلك لإكمال مشاريع كبيرة بشكل متزايد.

زاد تعقيد كود JavaScript بشكل حاد. تحتوي صفحة ويب واحدة على 10000 سطر من رمز JavaScript ، والذي كان منذ فترة طويلة شائعة. في عام 2010 ، كشف مهندس أن طول رمز Gmail هو 443،000 سطر!

للكتابة والحفاظ على مثل هذا الرمز المعقد ، يجب استخدام استراتيجيات معيارية. في الوقت الحاضر ، فإن النهج السائد في الصناعة هو تبني "البرمجة الموجهة للكائنات". لذلك ، أصبحت كيفية قيام JavaScript بتنفيذ البرمجة الموجهة للكائنات موضوعًا ساخنًا.

المشكلة هي أن بناء جملة Javascipt لا يدعم "الفئة" (الفئة) ، مما يجعل استخدام طرق البرمجة التقليدية الموجهة للكائنات المستحيل استخدامها مباشرة. قام المبرمجون بالكثير من الاستكشافات لدراسة كيفية محاكاة "الفصول" مع JavaScript. تلخص هذه المقالة ثلاث طرق لـ JavaScript التي تحدد "فصول" ، وتناقش خصائص كل طريقة ، وتؤكد على أفضل طريقة في عيني.

===============================================================

ثلاث طرق لتحديد فصل في JavaScript

في البرمجة الموجهة للكائنات ، يعد الفئة نموذجًا لكائن يحدد الخصائص والأساليب التي تشاركها نفس المجموعة من الكائنات (المعروفة أيضًا باسم "الحالات".

لا تدعم لغة JavaScript "الفصول" ، ولكن يمكن استخدام بعض الحلول لمحاكاة "الفصول".

1. طريقة المنشئ

هذه طريقة كلاسيكية وطريقة لا بد منها في الكتب المدرسية. يستخدم مُنشئًا لمحاكاة "فئة" ويستخدم هذه الكلمة الرئيسية للإشارة إلى كائن المثيل بداخله.

نسخة الكود كما يلي:

وظيفة Cat () {

this.name = "الشعر الكبير" ؛

}

عند إنشاء مثيل ، استخدم الكلمة الرئيسية الجديدة.

نسخة الكود كما يلي:

var cat1 = new cat () ؛

تنبيه (cat1.name) ؛ // شعر كبير

يمكن أيضًا تحديد خصائص وطرق الفصل على كائن النموذج الأولي للمُنشئ.

نسخة الكود كما يلي:

cat.prototype.makesound = function () {

تنبيه ("مواء مواء") ؛

}

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

2. object.create () طريقة

من أجل حل أوجه القصور في "طريقة المنشئ" ولإنشاء كائنات أكثر ملاءمة ، فإن الإصدار الخامس من ECMASCript ، المعيار الدولي لـ JavaScript (الإصدار الثالث متاح حاليًا) ، اقترح طريقة جديدة كائن.

باستخدام هذه الطريقة ، فإن "الفئة" هو كائن ، وليس وظيفة.

نسخة الكود كما يلي:

var cat = {

الاسم: "الشعر الكبير" ،

MakeOund: function () {Alert ("Meow Meow Meow") ؛ }

} ؛

ثم ، استخدم Object.create () مباشرة لإنشاء مثيل دون استخدام جديد.

نسخة الكود كما يلي:

var cat1 = object.create (cat) ؛

تنبيه (cat1.name) ؛ // شعر كبير

cat1.makesound () ؛ // مواء مواء مواء

حاليًا ، نشرت أحدث إصدارات المتصفحات الرئيسية (بما في ذلك IE9) هذه الطريقة. إذا واجهت متصفحًا قديمًا ، فيمكنك استخدام الكود التالي لنشره بنفسك.

نسخة الكود كما يلي:

if (! object.create) {

object.create = function (o) {

الدالة f () {}

f.prototype = o ؛

إرجاع جديد f () ؛

} ؛

}

هذه الطريقة أبسط من "طريقة المنشئ" ، لكنها لا تستطيع تنفيذ سمات خاصة وطرق خاصة ، ولا يمكن مشاركة البيانات بين كائنات المثيل ، وبالتالي فإن محاكاة "الفئات" ليست شاملة بما فيه الكفاية.

3. القانون الحد الأدنى

اقترح المبرمج الهولندي Gabor de Mooij نهجًا جديدًا كان أفضل من Object.create () ، والذي أطلق عليه "النهج الحد الأدنى". هذه هي أيضًا الطريقة التي أوصي بها.

3.1 التغليف

لا تستخدم هذه الطريقة هذا والنموذج الأولي ، والرمز بسيط للغاية للنشر ، وهذا على الأرجح هو السبب في أنه يسمى "القانون الحد الأدنى".

بادئ ذي بدء ، يستخدم أيضًا كائنًا لمحاكاة "الفئة". في هذه الفئة ، حدد مُنشئًا CreateNew () لإنشاء مثيل.

نسخة الكود كما يلي:

var cat = {

CreateNew: Function () {

// بعض التعليمات البرمجية هنا

}

} ؛

ثم ، في CreateNew () ، حدد كائن مثيل واستخدم كائن المثيل هذا كقيمة الإرجاع.

نسخة الكود كما يلي:

var cat = {

CreateNew: Function () {

var cat = {} ؛

cat.name = "الشعر الكبير" ؛

cat.makesound = function () {Alert ("meow meow") ؛ } ؛

إرجاع القط

}

} ؛

عند استخدامه ، اتصل بالطريقة CreateNew () للحصول على كائن المثيل.

نسخة الكود كما يلي:

var cat1 = cat.createNew () ؛

cat1.makesound () ؛ // مواء مواء مواء

تتمثل ميزة هذا النهج في أنه من السهل فهمها ، ولديه بنية واضحة وأنيقة ، وتتماشى مع بناء "البرمجة الموجهة للكائنات" التقليدية ، بحيث يمكن نشر الميزات التالية بسهولة.

3.2 الميراث

من المريح للغاية تنفيذ فصل واحد في الفصل التالي. ما عليك سوى استدعاء طريقة CreateNew () للأخير في طريقة CreateNew ().

حدد أولاً فئة حيوانات.

نسخة الكود كما يلي:

var animal = {

CreateNew: Function () {

var Animal = {} ؛

Animal.sleep = function () {Alert ("Sleep in") ؛ } ؛

إرجاع الحيوان

}

} ؛

بعد ذلك ، في طريقة Cat's CreateNew () ، تسمى طريقة CreateNew () Animal.

نسخة الكود كما يلي:

var cat = {

CreateNew: Function () {

var cat = Animal.CreateNew () ؛

cat.name = "الشعر الكبير" ؛

cat.makesound = function () {Alert ("meow meow") ؛ } ؛

إرجاع القط

}

} ؛

سوف يرث مثيل CAT الذي تم الحصول عليه بهذه الطريقة كل من فئة CAT وفئة الحيوانات.

نسخة الكود كما يلي:

var cat1 = cat.createNew () ؛

cat1.sleep () ؛ // النوم

3.3 السمات الخاصة والأساليب الخاصة

في طريقة CreateNew () ، طالما أن الأساليب والخصائص التي لم يتم تعريفها على كائن CAT خاص.

نسخة الكود كما يلي:

var cat = {

CreateNew: Function () {

var cat = {} ؛

var sound = "Meow Meow Meow" ؛

cat.makesound = function () {Alert (sound) ؛ } ؛

إرجاع القط

}

} ؛

لا يمكن قراءة الصوت المتغير الداخلي في المثال أعلاه خارجيًا ، ولا يمكن قراءته إلا من خلال طريقة Cat العامة ().

نسخة الكود كما يلي:

var cat1 = cat.createNew () ؛

تنبيه (cat1.sound) ؛ // غير محدد

3.4 مشاركة البيانات

في بعض الأحيان ، نحتاج إلى جميع كائنات المثيلات لتكون قادرة على قراءة وكتابة نفس البيانات الداخلية. في هذا الوقت ، ما عليك سوى تغليف هذه البيانات الداخلية داخل كائن الفئة وخارج طريقة CreateNew ().

نسخة الكود كما يلي:

var cat = {

الصوت: "مواء مواء" ،

CreateNew: Function () {

var cat = {} ؛

cat.makesound = function () {Alert (cat.sound) ؛ } ؛

cat.Changesound = function (x) {cat.sound = x ؛ } ؛

إرجاع القط

}

} ؛

ثم ، يتم إنشاء كائنات مثيل:

نسخة الكود كما يلي:

var cat1 = cat.createNew () ؛

var cat2 = cat.createNew () ؛

cat1.makesound () ؛ // مواء مواء مواء

في هذا الوقت ، إذا كان هناك كائن مثيل وتم تعديل البيانات المشتركة ، فسيتأثر كائن المثيل الآخر أيضًا.

نسخة الكود كما يلي:

Cat2.Changesound ("Lalala") ؛

cat1.makesound () ؛ // لالالا

(زيادة)