Contoh penggunaan penutupan Javascript analysis_javascript kemahiran

Artikel ini menganalisis konsep dan penggunaan penutupan Javascript dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Apabila bercakap tentang penutupan, semua orang pasti pernah mendengarnya. Ini adalah pemahaman mudah saya.
Sejujurnya, tidak banyak senario di mana penutupan sebenarnya ditulis secara manual dalam kerja harian, tetapi rangka kerja dan komponen pihak ketiga yang digunakan dalam projek lebih kurang menggunakan penutupan.
Oleh itu, adalah sangat perlu untuk memahami penutupan. Haha...

1. Apakah itu penutupan

Ringkasnya, ia adalah fungsi yang boleh membaca pembolehubah dalaman fungsi lain.
Disebabkan oleh ciri-ciri skop pembolehubah JS, pembolehubah dalaman tidak boleh diakses dari luar, tetapi pembolehubah luaran boleh diakses dari dalam.

2. Senario penggunaan

1. Laksanakan ahli persendirian.
2. Lindungi ruang nama untuk mengelakkan pencemaran pembolehubah global.
3. Pembolehubah cache.

Mari kita lihat contoh enkapsulasi dahulu:

Salin kod Kod adalah seperti berikut:

var person = function () {
// Skop pembolehubah berada di dalam fungsi dan tidak boleh diakses dari luar
var name = "default";

kembali {
          getName: function () {
              kembalikan nama;
},
setName: function (newName) {
              nama = newName;
}
}
}();

console.log(person.name); // Akses langsung, hasilnya: tidak ditentukan
console.log(person.getName()); // Hasilnya ialah: lalai
console.log(person.setName("langjt"));
console.log(person.getName()); // Hasilnya ialah: langjt

Lihat penutupan yang biasa digunakan dalam gelung untuk menyelesaikan masalah merujuk pembolehubah luaran:

Salin kod Kod adalah seperti berikut:

var aLi = document.getElementsByTagName('li');
untuk (var i=0, len=aLi.length; i aLi[i].onclick = function() {
alert(i); // Tidak kira elemen

mana yang diklik, nilai yang muncul ialah len, menunjukkan bahawa nilai i di sini adalah sama dengan nilai i yang dicetak selepas untuk.
};
}

Selepas menggunakan penutupan:

Salin kod Kod adalah seperti berikut:

var aLi = document.getElementsByTagName('li');
untuk (var i=0, len=aLi.length; i aLi[i].onclick = (fungsi(i) {
Kembalikan fungsi() {
alert(i); // Klik elemen

dan subskrip yang sepadan akan muncul.
}
})(i);
}

3. Langkah berjaga-jaga

1. Kebocoran memori

Memandangkan penutupan menyebabkan semua pembolehubah dalam fungsi disimpan dalam ingatan, yang menggunakan banyak memori, penutupan tidak boleh disalahgunakan, jika tidak, ia akan menyebabkan masalah prestasi pada halaman web.
Contohnya:

Salin kod Kod adalah seperti berikut:

function foo() {
var oDiv = document.getElementById(‘J_DIV’);
var id = oDiv.id;
oDiv.onclick = function() {
// alert(oDiv.id); Terdapat rujukan bulat di sini, dan oDiv masih dalam ingatan selepas halaman versi rendah IE ditutup. Jadi cache jenis primitif dan bukannya objek apabila boleh.
alert(id);
};
oDiv = null;
}

2. Penamaan pembolehubah

Jika nama pembolehubah bagi fungsi dalaman dan nama pembolehubah bagi fungsi luaran adalah sama, maka fungsi dalaman tidak lagi boleh menunjuk kepada pembolehubah dengan nama fungsi luaran yang sama.
Contohnya:

Salin kod Kod adalah seperti berikut:

function foo(num) {
kembalikan fungsi(bilangan) {
console.log(bilangan);
}
}
var f = foo baharu(9);
f(); // undefined

Tatsächlich besteht die obige Verwendung, der Fachbegriff wird Funktionscurrying genannt, darin, eine Funktion, die mehrere Parameter akzeptiert, in eine Funktion umzuwandeln, die einen einzelnen Parameter (den ersten Parameter der ursprünglichen Funktion) akzeptiert und die verbleibenden Parameter zurückgibt . Neue Funktionstechnologie, die Parameter entgegennimmt und ein Ergebnis zurückgibt. Im Wesentlichen nutzt es auch die Caching-Funktion von Verschlüssen, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var adder = function(num) {
Rückgabefunktion(y) {
          return num y;
};
};

var inc = adder(1);
var dec = adder(-1);
//inc, dec sind jetzt zwei neue Funktionen, deren Funktion darin besteht, den übergebenen Parameterwert (/‐)1
umzuwandeln alarm(inc(99));//100
alarm(dec(101));//100
alarm(adder(100)(2));//102
alarm(adder(2)(100));//102

Ein weiteres Beispiel ist der seaJS-Quellcode von Ali Yubo:

Code kopieren Der Code lautet wie folgt:

/**
 * util-lang.js – Die minimale Spracherweiterung
 */
Funktion isType(type) {
Rückgabefunktion(obj) {
Return {}.toString.call(obj) == "[object " type "]"
}
}

var isObject = isType("Object");
var isString = isType("String");

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.