يقدم
الجميع على دراية بالمصمم ، ولكن إذا كنت مبتدئًا ، فلا يزال من الضروري فهم ماهية المنشئون. يتم استخدام المنشئ لإنشاء نوع معين من الكائنات - لا يعلن فقط الكائن المستخدم ، ولكنه يقبل أيضًا المعلمات لتعيين قيمة عضو الكائن عند إنشاء الكائن لأول مرة. يمكنك تخصيص مُنشئك وإعلان خصائص أو طرق كائن النوع المخصص.
الاستخدام الأساسي
في JavaScript ، عادة ما يعتبر المنشئون يستخدمون لتنفيذ الحالات. JavaScript ليس لديه مفهوم الفصول ، ولكن لديه مُنشئين خاصين. استخدم الكلمة الرئيسية الجديدة للاتصال بالوظيفة المبكرة المحددة. يمكنك إخبار JavaScript بأنك تريد إنشاء كائن جديد وأن يتم تعريف إعلانات الأعضاء للكائن الجديد في المنشئ. داخل المنشئ ، تشير هذه الكلمة الرئيسية إلى الكائن الذي تم إنشاؤه حديثًا. الاستخدام الأساسي هو كما يلي:
نسخة الكود كما يلي:
وظيفة السيارة (نموذج ، سنة ، أميال) {
this.model = نموذج ؛
هذا.
this.miles = miles ؛
this.output = function () {
إرجاع this.model + "left" + this.miles + "km" ؛
} ؛
}
var tom = سيارة جديدة ("العم" ، 2009 ، 20000) ؛
var dudu = سيارة جديدة ("Dudu" ، 2010 ، 5000) ؛
console.log (tom.output ()) ؛
console.log (dudu.output ()) ؛
المثال أعلاه هو نمط مُنشئ بسيط للغاية ، لكنه مشكلة قليلاً. بادئ ذي بدء ، من المزعج للغاية استخدام الميراث. ثانياً ، يتم إعادة تعريف الإخراج () في كل مرة يتم فيها إنشاء كائن. أفضل طريقة هي السماح لجميع مثيلات نوع السيارة بمشاركة طريقة الإخراج () ، بحيث إذا كانت هناك مجموعات كبيرة من الحالات ، فستوفر الكثير من الذاكرة.
لحل هذه المشكلة ، يمكننا استخدام الطريقة التالية:
نسخة الكود كما يلي:
وظيفة السيارة (نموذج ، سنة ، أميال) {
this.model = نموذج ؛
هذا.
this.miles = miles ؛
this.output = formatcar ؛
}
وظيفة formatcar () {
إرجاع this.model + "left" + this.miles + "km" ؛
}
على الرغم من توفر هذه الطريقة ، لدينا الطريقة الأفضل التالية.
المنشئون والنماذج الأولية
هناك خاصية النموذج الأولي في JavaScript تسمى النموذج الأولي. عندما يتم استدعاء المُنشئ لإنشاء كائن ما ، تتوفر جميع خصائص النموذج الأولي للمنشئ على الكائن الذي تم إنشاؤه حديثًا. وبهذه الطريقة ، يمكن لحالات كائن السيارة المتعددة مشاركة نفس النموذج الأولي. دعنا نوسع الرمز في المثال أعلاه:
نسخة الكود كما يلي:
وظيفة السيارة (نموذج ، سنة ، أميال) {
this.model = نموذج ؛
هذا.
this.miles = miles ؛
}
/*
ملاحظة: هنا استخدمنا Object.prototype. اسم الطريقة ، وليس الكائن.
يستخدم بشكل أساسي لتجنب إعادة كتابة كائن النموذج الأولي
*/
car.prototype.output = function () {
إرجاع this.model + "left" + this.miles + "km" ؛
} ؛
var tom = سيارة جديدة ("العم" ، 2009 ، 20000) ؛
var dudu = سيارة جديدة ("Dudu" ، 2010 ، 5000) ؛
console.log (tom.output ()) ؛
console.log (dudu.output ()) ؛
هنا ، يمكن مشاركة المثيل المفرد () واستخدامه في جميع مثيلات كائن السيارة.
أيضًا: نوصي ببدء المنشئون بحرف رأس المال لتمييز الوظائف العادية.
هل يمكنك استخدام جديد فقط؟
في المثال أعلاه ، يتم إنشاء سيارة الوظيفة باستخدام جديد لإنشاء كائنات. هل هناك طريقة واحدة فقط؟ في الواقع ، هناك طرق أخرى ، دعنا ندرج اثنين:
نسخة الكود كما يلي:
وظيفة السيارة (نموذج ، سنة ، أميال) {
this.model = نموذج ؛
هذا.
this.miles = miles ؛
// تخصيص إخراج الإخراج
this.output = function () {
إرجاع this.model + "left" + this.miles + "km" ؛
}
}
// الطريقة 1: تسمى كدالة
سيارة ("العم" ، 2009 ، 20000) ؛ // أضف إلى كائن النافذة
console.log (window.output ()) ؛
// الطريقة 2: اتصل في نطاق كائن آخر
var o = new Object () ؛
Car.Call (O ، "Dudu" ، 2010 ، 5000) ؛
console.log (o.output ()) ؛
الطريقة 1 من هذا الرمز مميز بعض الشيء. إذا استدعاء جديد الوظيفة مباشرة ، فإن هذا يشير إلى نافذة الكائن العالمي. دعونا نتحقق منه:
نسخة الكود كما يلي:
// كمكالمة دالة
var tom = Car ("Uncle" ، 2009 ، 20000) ؛
console.log (typeof tom) ؛ // "غير محدد"
console.log (window.output ()) ؛ // "سار العم 20،000 كيلومتر"
في هذا الوقت ، فإن الكائن TOM غير محدد ، وسيقوم Window.Output () بإخراج النتيجة بشكل صحيح. إذا كنت تستخدم الكلمة الرئيسية الجديدة ، فلا توجد مشكلة من هذا القبيل. التحقق كما يلي:
نسخة الكود كما يلي:
// استخدم كلمة رئيسية جديدة
var tom = سيارة جديدة ("العم" ، 2009 ، 20000) ؛
console.log (typeof tom) ؛ // "هدف"
console.log (tom.output ()) ؛ // "سار العم 20،000 كيلومتر"
قوة جديدة
يوضح المثال أعلاه مشكلة عدم استخدام جديدة. فهل هناك طريقة للمشارك لإجبار الكلمة الرئيسية الجديدة؟ الجواب نعم ، فوق الكود:
نسخة الكود كما يلي:
وظيفة السيارة (نموذج ، سنة ، أميال) {
if (! (هذا مثيل السيارة)) {
إرجاع سيارة جديدة (نموذج ، سنة ، ميل) ؛
}
this.model = نموذج ؛
هذا.
this.miles = miles ؛
this.output = function () {
إرجاع this.model + "left" + this.miles + "km" ؛
}
}
var tom = سيارة جديدة ("العم" ، 2009 ، 20000) ؛
var dudu = car ("dudu" ، 2010 ، 5000) ؛
console.log (typeof tom) ؛ // "هدف"
console.log (tom.output ()) ؛ // "سار العم 20،000 كيلومتر"
console.log (typeof dudu) ؛ // "هدف"
console.log (dudu.output ()) ؛ // "سار دودو 5000 كيلومتر"
من خلال الحكم على ما إذا كانت هذه الحالة هي سيارة ، فإننا نقرر إعادة سيارة جديدة أو مواصلة تنفيذ الكود. إذا تم استخدام الكلمة الرئيسية الجديدة ، (هذه الحالة من السيارة) صحيحة ، وستستمر تعيين المعلمة التالي. إذا لم يتم استخدام جديد ، (هذه السيارة من السيارة) خاطئة ، وسيتم إعادة مثيل جديد مرة أخرى.
وظيفة الغلاف الأصلية
هناك 3 وظائف غلاف أصلية في JavaScript: الرقم ، السلسلة ، المنطقية ، في بعض الأحيان يتم استخدام كلاهما:
نسخة الكود كما يلي:
// استخدم وظيفة الغلاف الأصلي
var s = سلسلة جديدة ("سلسلة بلدي") ؛
var n = number number (101) ؛
var b = new Boolean (true) ؛
// أوصي بهذا
var s = "سلسلة بلدي" ؛
var n = 101 ؛
var b = true ؛
الموصى به ، استخدم فقط وظائف الغلاف هذه عندما تريد الحفاظ على الحالة العددية. من أجل الفرق ، يمكنك الرجوع إلى الكود التالي:
نسخة الكود كما يلي:
// السلسلة الأصلية
var Greet = "Hello There" ؛
// استخدم طريقة split () للانقسام
GEERT.SPLIT ('') [0] ؛ // "مرحبًا"
// إضافة سمات جديدة إلى النوع الأصلي لن الإبلاغ عن خطأ
تحية. smile = صحيح ؛
// لا يمكن الحصول على هذه القيمة (تحدثنا عن سبب تنفيذ ECMASCRIPT في الفصل 18)
console.log (Typeof Gener.smile) ؛ // "غير محدد"
// السلسلة الأصلية
var Greet = New String ("Hello There") ؛
// استخدم طريقة split () للانقسام
GEERT.SPLIT ('') [0] ؛ // "مرحبًا"
// إضافة سمات جديدة إلى نوع وظيفة Wrapper لن الإبلاغ عن خطأ
تحية. smile = صحيح ؛
// يمكن الوصول إلى خصائص جديدة بشكل طبيعي
console.log (Typeof Gener.smile) ؛ // "منطقية"
لخص
يشرح هذا الفصل بشكل أساسي الاختلافات بين استخدام وضع المنشئ وطريقة الاتصال والكلمة الرئيسية الجديدة. آمل أن ينتبه الجميع إليها عند استخدامه.
المرجع: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpathornjavascript