Artikel ini menganalisis konsep dan penggunaan penutupan javascript. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Ketika datang ke penutupan, saya percaya semua orang telah mendengar tentang mereka. Izinkan saya memberi tahu Anda pemahaman sederhana saya di bawah ini.
Sejujurnya, tidak ada banyak skenario untuk menulis penutupan secara manual dalam pekerjaan sehari-hari, tetapi kerangka kerja pihak ketiga dan komponen yang digunakan dalam proyek menggunakan lebih atau kurang penutupan.
Karena itu, sangat penting untuk memahami penutupan. hehe ...
1. Apa itu penutupan
Singkatnya, ini adalah fungsi yang dapat membaca variabel di dalam fungsi lain.
Karena ruang lingkup variabel JS, variabel internal tidak dapat diakses secara eksternal, dan variabel eksternal dapat berupa eksternal.
2. Gunakan skenario
1. Menerapkan anggota pribadi.
2. Lindungi ruang nama untuk menghindari pencemaran variabel global.
3. Variabel cache.
Pertama -tama mari kita lihat contoh enkapsulasi:
Salin kode sebagai berikut: var person = function () {
// ruang lingkup variabel berada di dalam fungsi dan tidak dapat diakses di luar
var name = "default";
kembali {
getName: function () {
nama pengembalian;
},
setName: function (newname) {
name = newname;
}
}
} ();
console.log (person.name); // akses langsung, hasilnya adalah: tidak ditentukan
console.log (person.getName ()); // Hasilnya adalah: default
console.log (person.setname ("langjt"));
console.log (person.getName ()); // Hasilnya adalah: langjt
Mari kita lihat penutupan umum di loop untuk menyelesaikan masalah referensi variabel eksternal:
Salinan kode adalah sebagai berikut: var ali = document.getElementsbyTagname ('li');
untuk (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .onClick = function () {
waspada (i); // Tidak peduli elemen mana yang Anda klik, nilai pop-up adalah Len, menunjukkan bahwa nilai saya di sini dan nilai yang saya cetak setelahnya adalah sama.
};
}
Setelah menggunakan penutupan:
Salinan kode adalah sebagai berikut: var ali = document.getElementsbyTagname ('li');
untuk (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .onClick = (function (i) {
return function () {
waspada (i); // Klik elemen <li> saat ini dan subskrip yang sesuai akan muncul.
}
})(Saya);
}
3. Hal -hal yang perlu diperhatikan
1. Kebocoran memori
Karena penutupan akan menyebabkan semua variabel dalam fungsi disimpan dalam memori, dan konsumsi memori sangat besar, penutupan tidak dapat disalahgunakan, jika tidak itu akan menyebabkan masalah kinerja halaman web.
Misalnya:
Salin kode sebagai berikut: function foo () {
var odiv = document.geteLementById ('j_div');
var id = odiv.id;
odiv.onClick = function () {
// waspada (odiv.id); Ada referensi melingkar di sini. ODIV masih dalam memori setelah halaman Versi IE Low ditutup. Jadi cache tipe primitif, bukan objek sebanyak mungkin.
peringatan (id);
};
odiv = null;
}
2. Penamaan variabel
Jika variabel fungsi dalam dan nama variabel fungsi luar adalah sama, fungsi dalam tidak dapat lagi menunjuk ke variabel dengan nama yang sama dengan fungsi luar.
Misalnya:
Salin kode sebagai berikut: function foo (num) {
return function (num) {
console.log (num);
}
}
var f = foo baru (9);
F(); // belum diartikan
Faktanya, penggunaan di atas disebut fungsi kari, yang merupakan teknik mengonversi fungsi yang menerima banyak parameter menjadi fungsi yang menerima parameter tunggal (parameter pertama dari fungsi asli), dan mengembalikan fungsi baru yang menerima parameter yang tersisa dan mengembalikan hasilnya. Intinya, ini juga memanfaatkan fitur yang penutupan dapat di -cache, seperti:
Salin kode sebagai berikut: var adder = function (num) {
return function (y) {
mengembalikan num+y;
};
};
var inc = add (1);
var dec = add (-1);
// inc, dec sekarang dua fungsi baru, yang digunakan untuk melewati nilai parameter (+/) 1
Peringatan (Inc (99)); // 100
Peringatan (Dec (101)); // 100
Peringatan (Adder (100) (2)); // 102
Peringatan (Adder (2) (100)); // 102
Misalnya, dalam kode sumber Seajs Alibaba Yubo:
Salin kode sebagai berikut:/**
* util -lang.js - peningkatan bahasa minimum
*/
fungsi isType (type) {
fungsi pengembalian (obj) {
return {} .toString.call (obj) == "[objek" + type + "]"
}
}
var isObject = isType ("objek");
var isString = isType ("string");
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.