Penjelasan terperinci tentang ruang lingkup, peningkatan, dan pengetahuan penutupan yang paling membingungkan dalam JavaScript (disarankan)

1. Lingkup fungsi

1. Lingkup fungsi

Ini berarti bahwa ruang lingkup berada dalam "fungsi", dan semua variabel milik fungsi ini dapat digunakan dan multiplexed dalam seluruh ruang lingkup fungsi.

 function foo (a) {var b = 2; function bar () {// ...} var c = 3;} bar (); // console.log yang gagal (a, b, c); // ketiganya gagal

Jika beberapa pengidentifikasi dalam fungsi "FOO" di atas akan dilaporkan jika ditempatkan di luar fungsi dan diakses.

2. Segera Jalankan Ekspresi Fungsi

Menambahkan fungsi pembungkus di luar cuplikan kode apa pun dapat "menyembunyikan" variabel internal dan definisi fungsi, dan ruang lingkup eksternal tidak dapat mengakses apa pun di dalam fungsi pembungkus.

Misalnya, bilah di atas, A dan pengidentifikasi lainnya. Ini akan melindungi variabel dari kontaminasi.

Saat menulis plug-in, Anda sering menggunakan segera untuk menjalankan ekspresi fungsi untuk melindungi variabel di dalamnya.

 var a = 2; (fungsi foo () {var a = 3; console.log (a); // 3}) (); console.log (a); // 2

Yang pertama () dalam "FOO" mengubah fungsi menjadi ekspresi, dan yang kedua () menjalankan fungsi ini.

Ada istilah khusus: IIFE, yang mewakili ekspresi fungsi yang segera dipanggil;

1. Penggunaan lanjutan adalah menyebutnya sebagai fungsi dan lulus parameter

 (fungsi iife (global) {var a = 3; console.log (a); // 3console.log (global.a); // 2}) (jendela);

2. Tujuan perubahan adalah untuk membalikkan urutan kode yang berjalan, yang banyak digunakan dalam proyek CMD atau AMD.

 (function iife (pabrik) {factory (window);}) (fungsi def (global) {var a = 3; console.log (a); // 3console.log (global.a); // 2});

2. Lingkup blok

JavaScript tidak mendukung cakupan blok.

 untuk (var i = 0; i <10; i ++) {console.log (i);}

"I" dalam kode di atas setara dengan yang berikut ini

 var i; for (i = 0; i <10; i ++) {console.log (i);}

Tapi ada pengecualian, "coba/tangkap", tangkapan adalah lingkup blok.

 coba {undefined (); // Jalankan operasi ilegal untuk memaksa pengecualian} catch (err) {console.log (err); // dapat mengeksekusi secara normal! } console.log (err); // ReferenceError: err tidak ditemukan

ES6 telah mengubah status quo dan memperkenalkan kata kunci LET baru, yang dapat mengikat variabel ke ruang lingkup apa pun (biasanya di dalam {..}). Dengan kata lain, variabel yang dinyatakan untuk Let secara implisit terletak di ruang lingkup blok.

3. Peningkatan

Perilaku lingkup fungsi dan ruang lingkup blok adalah sama, dan dapat diringkas sebagai: variabel apa pun yang dinyatakan dalam ruang lingkup akan dilampirkan pada ruang lingkup ini.

1) Kompilasi dan Eksekusi

Semua deklarasi variabel dan fungsi akan diproses terlebih dahulu sebelum kode apa pun dijalankan. Anda dapat melihat contoh kode berikut.

 a = 2; var a; console.log (a); // 2

Kode ini setara dengan:

 Deklarasi Definisi Var A; // dilakukan pada tahap kompilasi A = 2; // Deklarasi penugasan akan ditinggalkan di tempat untuk menunggu konsol Tahap Eksekusi.log (a);

2) Prioritas fungsi

Fungsi akan dipromosikan terlebih dahulu, dan kemudian variabel akan.

 foo (); // 1var foo; function foo () {console.log (1);} foo = function () {console.log (2);};

Ekspresi fungsi var foo, meskipun sebelum deklarasi fungsi foo (), adalah deklarasi duplikat (dan karenanya diabaikan), karena deklarasi fungsi akan dipromosikan sebelum variabel normal.

Dan kode di atas setara dengan:

 function foo () {console.log (1);} foo (); // 1foo = function () {console.log (2);};

4. Penutupan

Penutupan merujuk pada fungsi yang memiliki akses ke variabel dalam ruang lingkup fungsi lain. Cara paling umum untuk membuat penutupan adalah dengan membuat fungsi lain dalam satu fungsi.

Mengakses variabel lokal dari fungsi ini melalui fungsi lain, menggunakan penutupan dapat menembus domain rantai aksi dan lulus variabel dan metode di dalam fungsi ke luar

Fitur Penutupan:

1. Fungsi secara inheren bersarang

2. Fungsi internal dapat merujuk ke parameter luar dan variabel

3. Parameter dan variabel tidak akan dikumpulkan oleh mekanisme pengumpulan sampah

1) Definisi

Ketika suatu fungsi dapat mengingat dan mengakses ruang lingkupnya berada, penutupan dihasilkan, bahkan jika fungsi dieksekusi di luar ruang lingkup saat ini.

 function foo () {var a = 2; batang fungsi () {console.log (a);} return bar;} var baz = foo (); baz (); // 2 - Ini adalah efek dari penutupan.

1. Tetapkan fungsi "bilah" ke "Baz" dan mengeksekusi "Baz". Lingkup saat ini tidak ada dalam lingkup "bar", tetapi dapat dieksekusi.

2. Penutupan juga akan mencegah pengumpulan sampah. Ketika "foo" dieksekusi, ruang lingkup internal masih ada. Dengan cara ini, "baz" dapat dieksekusi.

2) Lulus fungsi sebagai parameter

 function foo () {var a = 2; function baz () {console.log (a); // 2} bar (baz);} batang fungsi (fn) {fn (); // Ini adalah penutupan! }

Lewati fungsi internal Baz ke bar, dan ketika fungsi internal ini disebut (FN), penutupan ruang lingkup internal FOO () penutupnya dapat diamati karena dapat mengakses a.

Jika Anda memperlakukan fungsi sebagai tipe nilai di tingkat pertama dan meneruskannya di mana -mana, Anda akan melihat penerapan penutupan dalam fungsi -fungsi ini.

Dalam timer, pendengar acara, permintaan AJAX, komunikasi silang, pekerja web atau tugas asinkron (atau sinkron) lainnya, selama fungsi callback digunakan, sebenarnya menggunakan penutupan!

3) Loop dan penutupan

 untuk (var i = 1; i <= 5; i ++) {setTimeout (function timer () {console.log (i);}, i * 1000);}

Setiap kali dicetak, itu akan menjadi 6, dan panggilan balik dari fungsi penundaan akan dieksekusi hanya di akhir loop.

Menurut cara kerja lingkup, kenyataannya adalah bahwa meskipun lima fungsi dalam loop didefinisikan secara terpisah di setiap iterasi, mereka semua tertutup dalam ruang lingkup global bersama, jadi sebenarnya hanya ada satu i.

Sekarang gunakan penutupan untuk mengimplementasikan berbagai pencetakan I setiap kali.

 untuk (var i = 1; i <= 5; i ++) {(function (j) {setTimeout (function timer () {console.log (j);}, j * 1000);}) (i);}

IIFE menciptakan lingkup dengan mendeklarasikan dan menjalankan fungsi segera. Callback di SetTimeout dapat mengingat ruang lingkup saat ini, dan parameter "J" di setiap ruang lingkup berbeda.

Di atas adalah penjelasan terperinci tentang ruang lingkup, peningkatan, dan pengetahuan penutupan yang paling membingungkan dalam JavaScript yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!