1. Fungsi anonim
Fungsi adalah objek paling fleksibel dalam JavaScript. Di sini kami hanya menjelaskan tujuan fungsi anonimnya. Fungsi Anonim: Mereka adalah fungsi tanpa nama fungsi.
1.1 Definisi suatu fungsi. Pertama, mari kita perkenalkan secara singkat definisi suatu fungsi. Ini dapat dibagi secara kasar menjadi tiga cara.
Yang pertama: ini juga yang paling umum
Salinan kode adalah sebagai berikut:
fungsi ganda (x) {
mengembalikan 2 * x;
}
Metode kedua: Metode ini menggunakan fungsi konstruktor, yang menggunakan daftar parameter dan badan fungsi sebagai string, yang sangat tidak nyaman dan tidak disarankan.
Salinan kode adalah sebagai berikut:
var double = fungsi baru ('x', 'return 2 * x;');
Tipe ketiga:
var double = function (x) {return 2* x; }
Perhatikan bahwa fungsi di sebelah kanan "=" adalah fungsi anonim. Setelah membuat fungsi, fungsi ditetapkan ke kotak variabel.
1.2 Penciptaan fungsi anonim
Metode pertama: Tentukan fungsi kuadrat yang disebutkan di atas, yang juga merupakan salah satu metode yang paling umum digunakan.
Metode kedua:
Salinan kode adalah sebagai berikut:
(function (x, y) {
peringatan (x + y);
}) (dua puluh tiga);
Di sini fungsi anonim dibuat (di braket pertama), dan braket kedua digunakan untuk memanggil fungsi anonim dan lulus dalam parameter.
2. Penutupan
Kata bahasa Inggris untuk penutupan adalah penutupan, yang merupakan bagian yang sangat penting dari JavaScript, karena menggunakan penutupan dapat sangat mengurangi jumlah kode kami, membuat kode kami terlihat lebih jelas, dll. Singkatnya, fungsinya sangat kuat.
Arti penutupan: Terus terang, penutupan adalah fungsi bersarang. Fungsi dalam dapat menggunakan semua variabel fungsi luar, bahkan jika fungsi luar telah dieksekusi (ini melibatkan rantai lingkup JavaScript).
Contoh 1
Salinan kode adalah sebagai berikut:
function checkclosure () {
var str = 'Rain-man';
setTimeout (
function () {alert (str); } // Ini adalah fungsi anonim
, 2000);
}
checkclosure ();
Contoh ini terlihat sangat sederhana. Setelah analisis yang cermat dari proses eksekusi, masih ada banyak titik pengetahuan: pelaksanaan fungsi penutupan check -instan (mungkin hanya butuh 0,00001 milidetik), variabel STR dibuat dalam tubuh fungsi penutupan pemeriksaan. Setelah pemeriksaan pemeriksaan dieksekusi, STR tidak dirilis. Ini karena fungsi anonim di SetTimeout memiliki referensi ke STR. STR dilepaskan hanya setelah 2 detik.
Contoh 2, optimalkan kode
Salinan kode adalah sebagai berikut:
Fungsi fortimimeout (x, y) {
peringatan (x + y);
}
function delay (x, y, time) {
setTimeout ('fortimeout (' + x + ',' + y + ')', waktu);
}
/**
* Fungsi penundaan di atas sangat sulit dibaca dan tidak mudah ditulis, tetapi jika Anda menggunakan penutupan, kodenya bisa lebih jelas
* Fungsi tunda (x, y, waktu) {
* setTimeout (
* fungsi(){
* ForTimeout (x, y)
*}
* , waktu);
*}
*/
3. Berikan contoh
Penggunaan terbesar fungsi anonim adalah untuk membuat penutupan (salah satu fitur bahasa JavaScript), dan juga untuk membangun ruang nama untuk mengurangi penggunaan variabel global.
Contoh 3:
Salinan kode adalah sebagai berikut:
var oevent = {};
(fungsi(){
var addEvent = function () { / *Implementasi kode dihilangkan * /};
Fungsi RemestEvent () {}
oevent.addevent = addevent;
oevent.removeEvent = RemestEvent;
}) ();
Dalam kode ini, fungsi addEvent dan menghapus Event keduanya variabel lokal, tetapi kita dapat menggunakannya melalui variabel global, yang sangat mengurangi penggunaan variabel global dan meningkatkan keamanan halaman web. Kami ingin menggunakan kode ini: oevent.addevent (document.getElementById ('box'), 'klik', function () {});
Contoh 4:
Salinan kode adalah sebagai berikut:
var rainman = (function (x, y) {
mengembalikan x + y;
}) (dua puluh tiga);
/**
* Ini juga dapat ditulis dalam bentuk berikut, karena braket pertama hanya membantu kita membaca, tetapi format penulisan berikut tidak dianjurkan.
* var rainman = function (x, y) {
* mengembalikan x + y;
*} (dua puluh tiga);
*/
Di sini kami membuat variabel Rainman dan menginisialisasi ke 5 dengan memanggil fungsi anonim secara langsung. Trik ini terkadang sangat praktis.
Contoh 5:
Salinan kode adalah sebagai berikut:
var luar = null;
(fungsi(){
var satu = 1;
function inner () {
satu += 1;
waspada (satu);
}
luar = dalam;
}) ();
luar(); // 2
luar(); // 3
luar(); // 4
Variabel satu dalam kode ini adalah variabel lokal (karena didefinisikan dalam suatu fungsi), sehingga eksternal tidak dapat diakses. Tetapi di sini kita membuat fungsi dalam, yang dapat mengakses variabel; dan juga merujuk variabel global ke dalam, jadi tiga panggilan ke luar akan memunculkan hasil tambahan.
4. Perhatikan
4.1 Penutupan memungkinkan fungsi lapisan dalam untuk merujuk ke variabel dalam fungsi induk, tetapi variabel adalah nilai akhir
Contoh 6:
Salinan kode adalah sebagai berikut:
/**
* <body>
* <ul>
* <li> Satu </li>
* <li> dua </li>
* <li> Tiga </li>
* <li> Satu </li>
* </ul>
*/
var list = document.geteLementsbyTagname ('li');
untuk (var i = 0, len = lists.length; i <len; i ++) {
Daftar [i] .onmouseOver = function () {
waspada (i);
};
}
Anda akan menemukan bahwa ketika mouse bergerak melalui masing -masing <li & rt; elemen, selalu muncul 4 alih -alih subskrip elemen yang kami harapkan. Mengapa ini? Tindakan pencegahan telah dibahas (nilai akhir). Jelas penjelasan ini terlalu sederhana. Ketika acara mouseover memanggil fungsi mendengarkan, pertama -tama cari apakah saya didefinisikan di dalam fungsi anonim (function () {alert (i);}), dan hasilnya adalah tidak ditentukan; Oleh karena itu akan terlihat ke atas, dan hasil pencarian adalah bahwa itu telah didefinisikan, dan nilai i adalah 4 (nilai i setelah loop); Jadi, pada akhirnya, setiap pop-up adalah 4.
Solusi 1:
Salinan kode adalah sebagai berikut:
var list = document.geteLementsbyTagname ('li');
untuk (var i = 0, len = lists.length; i <len; i ++) {
(function (index) {
Daftar [indeks] .onmouseover = function () {
peringatan (indeks);
};
})(Saya);
}
Solusi 2:
Salinan kode adalah sebagai berikut:
var list = document.geteLementsbyTagname ('li');
untuk (var i = 0, len = lists.length; i <len; i ++) {
daftar [i]. $$ index = i; // Catat indeks dengan mengikat atribut indeks $$ pada elemen DOM
Daftar [i] .onmouseOver = function () {
Peringatan (ini. Indeks $$);
};
}
Solusi Tiga:
Salinan kode adalah sebagai berikut:
Function EventListener (daftar, indeks) {
list.onmouseover = function () {
peringatan (indeks);
};
}
var list = document.geteLementsbyTagname ('li');
untuk (var i = 0, len = lists.length; i <len; i ++) {
EventListener (daftar [i], i);
}
4.2 Kebocoran Memori
Menggunakan penutupan sangat mudah menyebabkan kebocoran memori browser. Dalam kasus yang parah, browser akan mati. Jika Anda tertarik, silakan merujuk ke: http://www.vevb.com/article/57404.htm