الكائنات هي أي شيء يريد الناس دراسته ، من أبسط الأعداد الصحيحة إلى الطائرات المعقدة ، وما إلى ذلك ، والتي لا يمكن أن تمثل فقط الأشياء الملموسة ، ولكن أيضًا القواعد المجردة أو الخطط أو الأحداث. -من موسوعة Baidu
البرمجة الموجهة نحو الكائن هي نموذج البرمجة الأكثر شعبية في الوقت الحاضر. لكن من المحبط أن لا يدعم جافا سكريبت الواجهة الأمامية الأكثر استخدامًا على نطاق واسع.
لا تحتوي JavaScript على أحرف التحكم في الوصول ، ولا تحدد فئة الكلمات الرئيسية ، ولا تدعم التمديد الموروثة أو القولون ، ولا تستخدم Virtual لدعم الوظائف الافتراضية. ومع ذلك ، JavaScript هي لغة مرنة. دعونا نلقي نظرة على كيفية قيام JavaScript بدون فئة الكلمات الرئيسية بتنفيذ تعريف الفئة وإنشاء كائنات.
حدد الفصل وإنشاء كائن مثيل للفئة
في JavaScript ، نستخدم الوظيفة لتحديد الفصل ، على النحو التالي:
نسخة الكود كما يلي:
شكل الوظيفة ()
{
var x = 1 ؛
var y = 2 ؛
}
قد تقول ، شك؟ أليس هذه وظيفة مميزة؟ هذا صحيح ، هذه وظيفة مميزة. نحدد وظيفة الشكل وتهيئة x و y. ومع ذلك ، إذا نظرت إليه من منظور آخر ، فهذا هو تحديد فئة الشكل ، والتي تحتوي على خصائلين X و Y ، والقيم الأولية هي 1 و 2 على التوالي. ومع ذلك ، فإن الكلمات الرئيسية التي نحددها هي الوظيفة بدلاً من الفصل.
بعد ذلك ، يمكننا إنشاء كائن رشيب من فئة الشكل ، على النحو التالي:
نسخة الكود كما يلي:
var ashape = شكل جديد () ؛
تحديد الممتلكات العامة والخاصة
لقد أنشأنا كائن Ashape ، ولكن عندما نحاول الوصول إلى خصائصه ، نحصل على خطأ مثل هذا:
نسخة الكود كما يلي:
Ashape.x = 1 ؛
هذا يدل على أن الخصائص المحددة مع VAR خاصة. نحتاج إلى استخدام هذه الكلمة الرئيسية لتحديد السمات العامة.
نسخة الكود كما يلي:
شكل الوظيفة ()
{
this.x = 1 ؛
this.y = 2 ؛
}
وبهذه الطريقة ، يمكننا الوصول إلى خصائص الشكل ، مثل:
نسخة الكود كما يلي:
Ashape.x = 2 ؛
حسنًا ، يمكننا تلخيصًا من الكود أعلاه: باستخدام VAR لتحديد السمة الخاصة للفئة ، واستخدام هذا لتحديد السمة العامة للفئة.
تحديد الأساليب العامة والخاصة
في JavaScript ، تعد الوظيفة مثيلًا لفئة الوظائف ، والوظيفة موروثة بشكل غير مباشر من الكائن ، وبالتالي فإن الوظيفة هي أيضًا كائن. لذلك ، يمكننا إنشاء وظيفة باستخدام طريقة المهمة. بالطبع ، يمكننا أيضًا تعيين وظيفة لمتغير سمة للفئة. بعد ذلك ، يمكن تسمية متغير السمة هذا بطريقة لأنها وظيفة قابلة للتنفيذ. الرمز كما يلي:
نسخة الكود كما يلي:
شكل الوظيفة ()
{
var x = 0 ؛
var y = 1 ؛
this.draw = function ()
{
//مطبعة؛
} ؛
}
نحدد السحب في الكود أعلاه ونخصص وظيفة لها. أدناه ، يمكننا استدعاء هذه الوظيفة من خلال Ashape ، والتي تسمى طريقة عامة في OOP ، مثل:
نسخة الكود كما يلي:
Ashape.draw () ؛
إذا تم تعريفه باستخدام var ، فإن السحب يصبح خاصًا ، والذي يسمى طريقة خاصة في OOP ، مثل:
نسخة الكود كما يلي:
شكل الوظيفة ()
{
var x = 0 ؛
var y = 1 ؛
var draw = function ()
{
//مطبعة؛
} ؛
}
بهذه الطريقة ، لا يمكنك استخدام Ashape.draw للاتصال بهذه الوظيفة.
مُنشئ
JavaScript لا يدعم OOP ، لذلك بالطبع لا يوجد مُنشئ. ومع ذلك ، يمكننا محاكاة مُنشئ أنفسنا وجعل الكائن يسمى تلقائيًا عند إنشائه. الرمز كما يلي:
نسخة الكود كما يلي:
شكل الوظيفة ()
{
var init = function ()
{
// رمز المنشئ
} ؛
init () ؛
}
في نهاية الشكل ، أطلقنا على وظيفة init بشكل مصطنع. ثم ، عند إنشاء كائن شكل ، سيتم دائمًا استدعاء init تلقائيًا ، والذي يمكنه محاكاة مُنشئنا.
مُنشئ مع المعلمات
كيف تجعل المنشئ يأخذ المعلمات؟ في الواقع ، الأمر بسيط للغاية. فقط اكتب المعلمات المراد نقلها إلى قائمة معلمات الوظيفة ، مثل:
نسخة الكود كما يلي:
شكل الوظيفة (الفأس ، AY)
{
var x = 0 ؛
var y = 0 ؛
var init = function ()
{
// مُنشئ
x = الفأس ؛
y = ay ؛
} ؛
init () ؛
}
بهذه الطريقة ، يمكننا إنشاء كائن مثل هذا:
نسخة الكود كما يلي:
var ashape = شكل جديد (0،1) ؛
خصائص ثابتة وطرق ثابتة
كيف تحدد الخصائص والأساليب الثابتة في جافا سكريبت؟ كما هو موضح أدناه:
نسخة الكود كما يلي:
شكل الوظيفة (الفأس ، AY)
{
var x = 0 ؛
var y = 0 ؛
var init = function ()
{
// مُنشئ
x = الفأس ؛
y = ay ؛
} ؛
init () ؛
}
شكل.
شكل. StaticMethod = function ()
مع الخصائص والأساليب الثابتة ، يمكننا الوصول إليها بأسماء الفصول الدراسية ، على النحو التالي:
نسخة الكود كما يلي:
تنبيه (Ashape.count) ؛
Ashape.StaticMethod () ؛
ملاحظة: الخصائص والأساليب الثابتة كلاهما عام. حتى الآن ، لا أعرف كيفية صنع خصائص وطرق ثابتة خاصة ~
الوصول إلى العقارات العامة والخاصة من هذه الفئة بطريقة
الوصول إلى خصائصك الخاصة في أساليب الفصل. تختلف طرق الوصول إلى JavaScript للممتلكات العامة والخاصة. يرجى الاطلاع على الرمز التالي:
نسخة الكود كما يلي:
شكل الوظيفة (الفأس ، AY)
{
var x = 0 ؛
var y = 0 ؛
this.gx = 0 ؛
this.gy = 0 ؛
var init = function ()
{
x = ax ؛ // إضافة سمات خاصة واكتب اسم المتغير مباشرة
y = ay ؛
this.gx = ax ؛ // للوصول إلى السمات العامة ، تحتاج إلى إضافة هذا قبل الاسم المتغير.
this.gy = ay ؛
} ؛
init () ؛
}
أشياء يجب ملاحظتها حول هذا
وفقًا لتجربتي ، فإن هذا في الفصل لا يشير دائمًا إلى كائننا نفسه. والسبب الرئيسي هو أن JavaScript ليس لغة OOP ، ويتم تعريف الوظائف والفئات بواسطة الوظائف ، والتي بالطبع سوف تسبب بعض المشكلات البسيطة.
الوضع الذي يشير إليه هذا المؤشر بشكل غير صحيح بشكل عام في معالجة الأحداث. نريد وظيفة العضو في كائن معين للرد على حدث ما. عندما يتم تشغيل الحدث ، سيتصل النظام بوظيفة العضو لدينا. ومع ذلك ، لم يعد هذا المؤشر قد لم يعد كائننا الخاص. بالطبع ، سيكون من الخطأ استدعاء هذا في وظيفة العضو في هذا الوقت.
الحل هو حفظ هذا في خاصية خاصة في بداية فئة التعريف. في وقت لاحق ، يمكننا استخدام هذه الخاصية بدلاً من هذا. أنا أستخدم هذا المؤشر مع هذه الطريقة آمنة للغاية وخالية من القلق ~
دعنا نعدل الرمز لحل هذه المشكلة. بمقارنة الكود في الجزء 6 ، ستفهم بالتأكيد:
نسخة الكود كما يلي:
شكل الوظيفة (الفأس ، AY)
{
var _ this = this ؛ // احفظ هذا واستخدم هذا بدلاً من هذا في المستقبل حتى لا يتم الخلط بينك بهذا
var x = 0 ؛
var y = 0 ؛
_THIS.GX = 0 ؛
_ this.gy = 0 ؛
var init = function ()
{
x = ax ؛ // إضافة سمات خاصة واكتب اسم المتغير مباشرة
y = ay ؛
_ this.gx = ax ؛ // للوصول إلى السمات العامة ، تحتاج إلى إضافة هذا قبل الاسم المتغير.
_ this.gy = ay ؛
} ؛
init () ؛
}
لقد تحدثنا أعلاه عن كيفية تحديد الفصول في JavaScript ، وإنشاء كائنات فئة ، وإنشاء خصائص وطرق خاصة وخاصة ، وإنشاء خصائص وطرق ثابتة ، ومحاكاة المنشآت ، ومناقشة هذا الخطأ المعرضة للخطأ.
هذا كل شيء عن تطبيق OOP في JavaScript. ما سبق هو المحتوى الأكثر عملية. بشكل عام ، يعرّف JavaScript الفئات ، واستخدام الكود أعلاه لإنشاء كائنات يكفي. بالطبع ، يمكنك أيضًا استخدام Mootools أو النموذج الأولي لتحديد الفئات وإنشاء كائنات. لقد استخدمت إطار عمل Mootools وهو شعور جيد جدًا. إنه أكثر مثالية لمحاكاة فئة JavaScript ويدعم ميراث الطبقة. يمكن للقراء المهتمين تجربته. بالطبع ، إذا كنت تستخدم إطارًا ، فيجب عليك تضمين ملفات رأس JS ذات الصلة في صفحة الويب الخاصة بك. لذلك ، ما زلت آمل أن يتمكن القراء من إنشاء فصول بدون إطار عمل. وبهذه الطريقة ، يكون الرمز أكثر كفاءة ، ويمكنك أيضًا أن ترى أنه ليس من المقلق إنشاء فئة بسيطة ~