تحلل هذه المقالة مفهوم واستخدام إغلاق JavaScript. شاركه للرجوع إليه. التفاصيل كما يلي:
عندما يتعلق الأمر بالإغلاق ، أعتقد أن الجميع قد سمع عنهم. دعني أخبرك بفهمي البسيط أدناه.
لكي نكون صادقين ، لا يوجد العديد من السيناريوهات لكتابة عمليات الإغلاق يدويًا في العمل اليومي ، ولكن تستخدم أطر عمل الجهات الخارجية والمكونات المستخدمة في المشروع إغلاقًا أكثر أو أقل.
لذلك ، من الضروري للغاية فهم الإغلاق. هههه ...
1. ما هو الإغلاق
باختصار ، إنها وظيفة يمكنها قراءة المتغيرات داخل وظائف أخرى.
نظرًا لنطاق متغيرات JS ، لا يمكن الوصول إلى المتغيرات الداخلية خارجيًا ، ويمكن أن تكون المتغيرات الخارجية خارجيًا.
2. استخدام السيناريوهات
1. تنفيذ الأعضاء من القطاع الخاص.
2. حماية مساحات الأسماء لتجنب تلويث المتغيرات العالمية.
3. ذاكرة التخزين المؤقت متغيرات.
دعونا أولاً نلقي نظرة على مثال على التغليف:
انسخ الرمز كما يلي: var person = function () {
// نطاق المتغير داخل الوظيفة ولا يمكن الوصول إليه في الخارج
var name = "default" ؛
يعود {
getName: function () {
اسم العودة
} ،
setName: function (newName) {
الاسم = newName ؛
}
}
} () ؛
console.log (person.name) ؛ // الوصول المباشر ، والنتيجة هي: غير محددة
console.log (person.getName ()) ؛ // النتيجة هي: الافتراضي
console.log (person.setName ("langjt")) ؛
console.log (person.getName ()) ؛ // النتيجة هي: langjt
دعونا نلقي نظرة على الإغلاق المشترك في الحلقات لحل مشكلة الرجوع إلى المتغيرات الخارجية:
نسخة الكود كما يلي: var ali = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = ali.length ؛ i <len ؛ i ++) {
علي [i] .onclick = function () {
تنبيه (ط) ؛ // بغض النظر عن العنصر الذي تنقر عليه ، فإن القيمة المنبثقة هي LEN ، مما يشير إلى أن قيمة I هنا وقيمة طباعة بعدها هي نفسها.
} ؛
}
بعد استخدام الإغلاق:
نسخة الكود كما يلي: var ali = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = ali.length ؛ i <len ؛ i ++) {
علي [i] .onclick = (وظيفة (i) {
وظيفة الإرجاع () {
تنبيه (ط) ؛ // انقر فوق العنصر <li> في هذا الوقت وسيظهر الحرف المقابل.
}
})(أنا)؛
}
3. أشياء يجب ملاحظتها
1. تسرب الذاكرة
نظرًا لأن عمليات الإغلاق ستؤدي إلى تخزين جميع المتغيرات في الوظيفة في الذاكرة ، ولا يمكن إساءة استخدام استهلاك الذاكرة ، ولا يمكن إساءة استخدامها ، وإلا فإنه سيؤدي إلى مشاكل في أداء صفحة الويب.
على سبيل المثال:
انسخ الرمز كما يلي: الدالة foo () {
var odiv = document.getElementById ('j_div') ؛
var id = odiv.id ؛
odiv.onclick = function () {
// ALERT (ODIV.ID) ؛ هناك مرجع دائري هنا. لا يزال ODIV في الذاكرة بعد إغلاق صفحة الإصدار المنخفض. لذلك ذاكرة التخزين المؤقت الأنواع البدائية بدلاً من الكائنات قدر الإمكان.
تنبيه (معرف) ؛
} ؛
ODIV = فارغة ؛
}
2. تسمية متغير
إذا كان متغير الوظيفة الداخلية والاسم المتغير للدالة الخارجية هو نفسه ، فلن تتمكن الوظيفة الداخلية من الإشارة إلى المتغير بنفس الاسم مثل الوظيفة الخارجية.
على سبيل المثال:
انسخ الرمز كما يلي: وظيفة foo (num) {
وظيفة الإرجاع (num) {
console.log (num) ؛
}
}
var f = new foo (9) ؛
f () ؛ // غير محدد
في الواقع ، يسمى الاستخدام المذكور أعلاه كاري الوظيفة ، وهو تقنية تحويل وظيفة تقبل معلمات متعددة في دالة تقبل معلمة واحدة (المعلمة الأولى من الوظيفة الأصلية) ، وإعادة دالة جديدة تقبل المعلمات المتبقية وتُرجع النتيجة. في جوهرها ، يستخدم أيضًا ميزات إغلاق يمكن تخزينها مؤقتًا ، مثل:
انسخ الرمز كما يلي: var adder = function (num) {
وظيفة الإرجاع (y) {
إرجاع num+y ؛
} ؛
} ؛
var inc = add (1) ؛
var dec = add (-1) ؛
// Inc ، DEC الآن وظيفتان جديدتان ، يتم استخدامهما لتمرير قيمة المعلمة (+/) 1
تنبيه (INC (99)) ؛ // 100
تنبيه (ديسمبر (101)) ؛ // 100
تنبيه (adder (100) (2)) ؛ // 102
تنبيه (adder (2) (100)) ؛ // 102
على سبيل المثال ، في رمز المصدر Seajs لألبابا يوبو:
انسخ الرمز كما يلي:/**
* util -lang.js - الحد الأدنى لتحسين اللغة
*/
وظيفة istype (type) {
وظيفة الإرجاع (OBJ) {
إرجاع {} .toString.call (obj) == "[كائن" + type + "]"
}
}
var isObject = isType ("Object") ؛
var isstring = istype ("string") ؛
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.