Perbincangan terperinci tentang fungsi tanpa nama JavaScript dan kemahiran closures

Perbincangan terperinci tentang fungsi tanpa nama JavaScript dan kemahiran closures_javascript

WBOY

Lepaskan： 2016-05-16 16:31:26

asal

1325 orang telah melayarinya

1. Fungsi tanpa nama
Fungsi ialah objek yang paling fleksibel dalam JavaScript Di sini kami hanya menerangkan penggunaan fungsi tanpa nama. Fungsi tanpa nama: Ia adalah fungsi tanpa nama fungsi.

1.1 Definisi fungsi, mula-mula memperkenalkan secara ringkas definisi fungsi, yang boleh dibahagikan secara kasar kepada tiga cara

Jenis pertama: Ini juga merupakan jenis yang paling biasa

Salin kod Kod adalah seperti berikut:

fungsi ganda(x){

Kembalikan 2 * x;
}

Kaedah kedua: Kaedah ini menggunakan pembina Fungsi dan menganggap kedua-dua senarai parameter dan badan fungsi sebagai rentetan Ini sangat menyusahkan dan tidak disyorkan.

Salin kod Kod adalah seperti berikut:

var double = new Function('x', 'return 2 * x;');

Jenis ketiga:

var double = function(x) { return 2* x; Ambil perhatian bahawa fungsi di sebelah kanan "=" ialah fungsi tanpa nama Selepas mencipta fungsi, fungsi itu diberikan kepada petak pembolehubah.

1.2 Penciptaan fungsi tanpa nama

Kaedah pertama ialah mentakrifkan fungsi segi empat sama seperti yang dinyatakan di atas, yang juga merupakan salah satu kaedah yang paling biasa digunakan.

Cara kedua:

Salin kod Kod adalah seperti berikut:

(fungsi(x, y){

makluman(x y);
})(2, 3);

Fungsi tanpa nama dicipta di sini (di dalam kurungan pertama), dan kurungan kedua digunakan untuk memanggil fungsi tanpa nama dan menghantar parameter.

2. Penutup

Perkataan Inggeris untuk penutupan ialah penutupan, yang merupakan bahagian pengetahuan yang sangat penting dalam JavaScript, kerana menggunakan penutupan boleh mengurangkan jumlah kod kami, menjadikan kod kami kelihatan lebih jelas, dsb. Pendek kata, ia sangat berkuasa.

Maksud penutupan: Secara terang-terangan, penutupan ialah sarang fungsi Fungsi dalam boleh menggunakan semua pembolehubah fungsi luar, walaupun fungsi luar telah dilaksanakan (ini melibatkan rantaian skop JavaScript).

Contoh 1

Salin kod Kod adalah seperti berikut: fungsi checkClosure(){

var str = 'manusia hujan';

setTimeout(

           function(){ alert(str); } //Ini ialah fungsi tanpa nama

, 2000);

}

checkClosure();

Contoh ini kelihatan sangat mudah masih terdapat banyak mata pengetahuan selepas analisis teliti proses pelaksanaannya: pelaksanaan fungsi checkClosure adalah serta-merta (mungkin hanya mengambil masa 0.00001 milisaat), dan str pembolehubah dibuat dalam badan fungsi daripada checkClosure , str tidak dikeluarkan selepas checkClosure dilaksanakan, kerana fungsi tanpa nama dalam setTimeout mempunyai rujukan kepada str. Selepas 2 saat, fungsi tanpa nama dalam badan fungsi dilaksanakan dan str dikeluarkan.

Contoh 2, kod dioptimumkan

Salin kod Kod adalah seperti berikut: fungsi untukTimeout(x, y){

makluman(x y);

}

kelewatan fungsi(x, y, masa){

setTimeout('forTimeout(' x ',' y ')' , masa);
}

/**

* Fungsi kelewatan di atas sangat sukar dibaca dan tidak mudah ditulis, tetapi jika anda menggunakan penutupan, kod boleh dibuat lebih jelas 

* kelewatan fungsi(x, y, masa){

* setTimeout(

* fungsi(){

* forTimeout(x, y) 

*                                                                                        
* , masa); 

* }

,*/

3. Contoh

Penggunaan terbesar fungsi tanpa nama adalah untuk membuat penutupan (yang merupakan salah satu ciri bahasa JavaScript), dan juga boleh membina ruang nama untuk mengurangkan penggunaan pembolehubah global.

Contoh 3:

Salin kod

Kod adalah seperti berikut:

var oEvent = {};
(fungsi(){
var addEvent = function(){ /*Pelaksanaan kod diabaikan*/ };
Function removeEvent(){}

oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();

Dalam kod ini, fungsi addEvent dan removeEvent ialah pembolehubah tempatan, tetapi kita boleh menggunakannya melalui pembolehubah global oEvent, yang mengurangkan penggunaan pembolehubah global dan meningkatkan keselamatan halaman web. Kami mahu menggunakan kod ini: oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

Contoh 4:

Salin kod Kod adalah seperti berikut:

var rainman = (fungsi(x , y){

Kembalikan x y;

})(2, 3);

/**

* boleh juga ditulis dalam bentuk berikut, kerana kurungan pertama hanya membantu kita membaca, tetapi format penulisan berikut tidak digalakkan. 

* var rainman = fungsi(x, y){

* kembalikan x y;

* }(2, 3);

,*/

Di sini kami mencipta rainman berubah-ubah dan memulakannya kepada 5 dengan memanggil terus fungsi tanpa nama ini kadangkala sangat praktikal.

Contoh 5:

Salin kod Kod adalah seperti berikut:

var outer = null;

(fungsi(){

var satu = 1;

Berfungsi dalam (){

         satu = 1;

makluman(satu);

}

luar = dalam;

})();

luar(); //2

luar(); //3

luar(); //4

Pembolehubah dalam kod ini ialah pembolehubah tempatan (kerana ia ditakrifkan dalam fungsi), jadi ia tidak boleh diakses dari luar. Tetapi di sini kami mencipta fungsi dalam, yang boleh mengakses pembolehubah satu; dan pembolehubah global luar merujuk kepada dalam, jadi memanggil luar tiga kali akan muncul hasil tambahan.

4 4.1 Penutupan membenarkan fungsi dalaman merujuk kepada pembolehubah dalam fungsi induk, tetapi pembolehubah ialah nilai akhir

Contoh 6:

Salin kod Kod adalah seperti berikut:

/**
*
*

tiga

*/
var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i ){
Senaraikan[ i ].onmouseover = function(){
makluman(i);
};
}

Anda akan mendapati bahawa apabila tetikus bergerak ke atas setiap elemen

Penyelesaian 1:

Salin kod Kod adalah seperti berikut:

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i ){
(fungsi(indeks){
Senaraikan[indeks].onmouseover = function(){
makluman(indeks);
})(i);
}

Penyelesaian 2:

Salin kod Kod adalah seperti berikut:

var lists = document.getElementsByTagName('li');

for(var i = 0, len = lists.length; i < len; i ){

Senaraikan[ i ].$$index = i; //Rekodkan subskrip dengan mengikat atribut $$index pada elemen Dom

Senaraikan[ i ].onmouseover = function(){

makluman(ini.$$index);
};

}

Penyelesaian tiga:

Salin kod Kod adalah seperti berikut:

fungsi eventListener(senarai, indeks){

List.onmouseover = function(){

makluman(indeks);

};

}

var lists = document.getElementsByTagName('li');

for(var i = 0 , len = lists.length ; i < len ; i ){

EventListener(senarai[ i ] , i);

}

4.2 Kebocoran memori

Menggunakan penutupan boleh menyebabkan kebocoran memori dengan mudah dalam kes yang serius, penyemak imbas akan hang Jika anda berminat, anda boleh merujuk kepada:

http://www.jb51.net/article/57404. htm