1. وظائف مجهولة
الوظائف هي الكائن الأكثر مرونة في JavaScript. هنا نوضح فقط الغرض من وظائفها المجهولة. وظائف مجهولة: فهي وظائف بدون أسماء وظائف.
1.1 تعريف الوظيفة. أولاً ، دعنا نقدم باختصار تعريف الوظيفة. يمكن تقسيمها إلى ثلاث طرق تقريبًا.
الأول: هذا هو أيضًا الأكثر شيوعًا
نسخة الكود كما يلي:
وظيفة مزدوجة (x) {
إرجاع 2 * x ؛
}
الطريقة الثانية: تستخدم هذه الطريقة مُنشئ الوظائف ، الذي يستخدم كلاً من قائمة المعلمات وجسم الوظيفة كسلاسل ، وهو أمر غير مريح للغاية ولا ينصح به.
نسخة الكود كما يلي:
var double = وظيفة جديدة ('x' ، 'return 2 * x ؛') ؛
النوع الثالث:
var double = function (x) {return 2* x ؛ }
لاحظ أن الوظيفة على يمين "=" هي وظيفة مجهولة. بعد إنشاء الوظيفة ، يتم تعيين الوظيفة إلى المربع المتغير.
1.2 إنشاء وظائف مجهولة
الطريقة الأولى: تحديد الوظيفة المربعة المذكورة أعلاه ، والتي تعد أيضًا واحدة من الطرق الأكثر استخدامًا.
الطريقة الثانية:
نسخة الكود كما يلي:
(وظيفة (x ، y) {
تنبيه (x + y) ؛
})(ثلاثة وعشرين)؛
هنا يتم إنشاء وظيفة مجهولة (في الشريحة الأولى) ، ويتم استخدام الشريحة الثانية لاستدعاء الوظيفة المجهولة والتمرير في المعلمات.
2. الإغلاق
الكلمة الإنجليزية للإغلاق هي الإغلاق ، وهو جزء مهم للغاية من JavaScript ، لأن استخدام الإغلاق يمكن أن يقلل إلى حد كبير من كمية الكود لدينا ، وجعل رمزنا يبدو أكثر وضوحًا ، وما إلى ذلك باختصار ، الوظائف قوية للغاية.
معنى الإغلاق: بصراحة ، الإغلاق هي وظائف تعشيش. يمكن للوظيفة الداخلية استخدام جميع متغيرات الوظيفة الخارجية ، حتى لو تم تنفيذ الوظيفة الخارجية (وهذا ينطوي على سلسلة نطاق JavaScript).
مثال 1
نسخة الكود كما يلي:
وظيفة checkclosure () {
var str = 'Rain-Man' ؛
settimeout (
function () {Alert (str) ؛ } // هذه وظيفة مجهولة
، 2000) ؛
}
checkclosure () ؛
هذا المثال يبدو بسيطًا جدًا. بعد التحليل الدقيق لعملية التنفيذ الخاصة بها ، لا يزال هناك العديد من نقاط المعرفة: إن تنفيذ وظيفة checkclosure فوري (ربما استغرق الأمر 0.00001 مللي ثانية فقط) ، يتم إنشاء STR متغير في جسم وظيفة checkclosure. بعد تنفيذ Checkclosure ، لم يتم إطلاق STR. وذلك لأن الوظيفة المجهولة في settimeout لديها إشارة إلى STR. يتم إصدار STR فقط بعد 2 ثانية.
مثال 2 ، قم بتحسين الرمز
نسخة الكود كما يلي:
وظيفة fortimeout (x ، y) {
تنبيه (x + y) ؛
}
تأخير الوظيفة (x ، y ، الوقت) {
setTimeout ('Fortimeout (' + x + '،' + y + ')' ، time) ؛
}
/**
* من الصعب للغاية قراءة وظيفة التأخير أعلاه وليس من السهل الكتابة ، ولكن إذا كنت تستخدم الإغلاق ، فقد يكون الرمز أكثر وضوحًا
* تأخير الوظيفة (x ، y ، الوقت) {
* settimeout (
* وظيفة(){
* fortimeout (x ، y)
*}
* ، وقت)؛
*}
*/
3. أعط مثالاً
أكبر استخدام للوظائف المجهولة هو إنشاء عمليات إغلاق (إحدى ميزات لغة JavaScript) ، وأيضًا لبناء مساحات أسماء لتقليل استخدام المتغيرات العالمية.
مثال 3:
نسخة الكود كما يلي:
var oevent = {} ؛
(وظيفة(){
var addEvent = function () { / *تم حذف تنفيذ الكود * /} ؛
وظيفة removeEvent () {}
oevent.addevent = addEvent ؛
oevent.removeEvent = removeEvent ؛
}) () ؛
في هذا الرمز ، تعد الوظائف AddEvent و RemoveEvent متغيرين محليين ، ولكن يمكننا استخدامه من خلال المتغير العالمي ، مما يقلل بشكل كبير من استخدام المتغيرات العالمية ويعزز أمان صفحة الويب. نريد استخدام هذا الرمز: oevent.addevent (document.getElementById ('box') ، 'click' ، function () {}) ؛
مثال 4:
نسخة الكود كما يلي:
var rainman = (function (x ، y) {
إرجاع x + y ؛
})(ثلاثة وعشرين)؛
/**
* يمكن أيضًا كتابتها في النموذج التالي ، لأن القوس الأول يساعدنا فقط على القراءة ، ولكن لا ينصح بتنسيق الكتابة التالي.
* var rainman = function (x ، y) {
* إرجاع x + y ؛
* }(ثلاثة وعشرين)؛
*/
هنا نقوم بإنشاء Rainman متغير وتهيئته إلى 5 عن طريق استدعاء الوظيفة المجهولة مباشرة. هذه الحيلة عملية في بعض الأحيان للغاية.
مثال 5:
نسخة الكود كما يلي:
var outer = null ؛
(وظيفة(){
var one = 1 ؛
وظيفة inner () {
واحد += 1 ؛
تنبيه (واحد) ؛
}
الخارجي = داخلي ؛
}) () ؛
Outer () ؛ // 2
Outer () ؛ // 3
Outer () ؛ // 4
المتغير في هذا الرمز هو متغير محلي (لأنه يتم تعريفه ضمن دالة) ، وبالتالي لا يمكن الوصول إلى الخارج. ولكن هنا نقوم بإنشاء وظيفة داخلية ، والتي يمكنها الوصول إلى المتغير ؛ وأيضًا يشير إلى المتغير العالمي الخارجي إلى الداخلية ، لذلك ستظهر ثلاث مكالمات إلى الخارج النتيجة الإضافية.
4. انتبه
4.1 يتيح الإغلاق وظائف الطبقة الداخلية للإشارة إلى المتغيرات في وظائف الأصل ، ولكن المتغير هو القيمة النهائية
مثال 6:
نسخة الكود كما يلي:
/**
* <body>
* <ul>
* <li> واحد </li>
* <li> اثنان </li>
* <li> ثلاثة </li>
* <li> واحد </li>
* </ul>
*/
قوائم var = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = lists.length ؛ i <len ؛ i ++) {
قوائم [i] .onmouseover = function () {
تنبيه (ط) ؛
} ؛
}
ستجد أنه عندما يتحرك الماوس عبر كل <li & rt ؛ العنصر ، ينبثق دائمًا 4 بدلاً من وضع العنصر الذي نتوقعه. لماذا هذا؟ تمت مناقشة الاحتياطات (القيمة النهائية). من الواضح أن هذا التفسير بسيط للغاية. عندما يستدعي حدث Mouseover وظيفة الاستماع ، ابحث أولاً عما إذا كان يتم تعريفني داخل الوظيفة المجهولة (Function () {Alert (i) ؛}) ، والنتيجة هي أنه لم يتم تعريفه ؛ لذلك سوف تنظر للأعلى ، ونتيجة البحث هي أنه تم تعريفه ، وقيمة I هي 4 (قيمة i بعد الحلقة) ؛ لذلك ، في النهاية ، كل نافذة منبثقة هي 4.
الحل 1:
نسخة الكود كما يلي:
قوائم var = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = lists.length ؛ i <len ؛ i ++) {
(وظيفة (فهرس) {
قوائم [index] .onmouseover = function () {
تنبيه (فهرس) ؛
} ؛
})(أنا)؛
}
الحل 2:
نسخة الكود كما يلي:
قوائم var = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = lists.length ؛ i <len ؛ i ++) {
قوائم [i]. $$ index = i ؛ // سجل الفهرس عن طريق ربط سمة فهرس $$ على عنصر DOM
قوائم [i] .onmouseover = function () {
تنبيه (هذا. $$ index) ؛
} ؛
}
الحل الثالث:
نسخة الكود كما يلي:
وظيفة EventListener (قائمة ، فهرس) {
list.onmouseover = function () {
تنبيه (فهرس) ؛
} ؛
}
قوائم var = document.getElementsByTagName ('li') ؛
لـ (var i = 0 ، len = lists.length ؛ i <len ؛ i ++) {
eventListener (قوائم [i] ، i) ؛
}
4.2 تسرب الذاكرة
من السهل جدًا استخدام الإغلاق للتسبب في تسرب ذاكرة المتصفح. في الحالات الشديدة ، سيكون المتصفح ميتًا. إذا كنت مهتمًا ، يرجى الرجوع إلى: http://www.vevb.com/article/57404.htm