Sebelum mempelajari tentang cakupan variabel dalam JavaScript, kita harus memperjelas beberapa poin:
• Cakupan variabel JavaScript didasarkan pada rantai cakupan uniknya.
•JavaScript tidak memiliki cakupan tingkat blok.
•Variabel yang dideklarasikan dalam suatu fungsi didefinisikan di seluruh fungsi.
1. Rantai cakupan JavaScript
Pertama lihat kode berikut:
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; } rainman(); //Panggil fungsi rainman</script>
Perhatikan kode alert(rain);. JavaScript terlebih dahulu memeriksa apakah variabel hujan didefinisikan dalam fungsi dalam. Jika ditentukan, variabel hujan dalam fungsi dalam digunakan. Jika variabel hujan tidak ditentukan dalam fungsi dalam, JavaScript akan terus memeriksa apakah variabel hujan didefinisikan dalam fungsi rainman. Dalam kode ini, variabel hujan tidak ditentukan dalam isi fungsi rainman, sehingga mesin JavaScript akan terus mencari (objek global) untuk melihat apakah hujan didefinisikan dalam objek global yang kita miliki didefinisikan hujan = 1, sehingga hasil akhir akan muncul '1'.
Rantai cakupan: Ketika JavaScript perlu menanyakan variabel x, ia akan mencari objek pertama dalam rantai cakupan terlebih dahulu. Jika objek pertama tidak mendefinisikan Jika tidak ada definisi, pencarian akan dilanjutkan, dan seterusnya.
Kode di atas melibatkan tiga objek rantai lingkup, secara berurutan: inner, rainman, dan window.
2. Di dalam badan fungsi, variabel lokal mempunyai prioritas lebih tinggi dibandingkan variabel global dengan nama yang sama.
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> var rain = 1; //Definisikan variabel global fungsi hujan check(){ var rain = 100; //Definisikan variabel lokal peringatan hujan ( rain ); di sini } centang(); peringatan( hujan ); //1 akan muncul di sini</script>
3. JavaScript tidak memiliki cakupan tingkat blok.
Ini juga merupakan bagian di mana JavaScript lebih fleksibel dibandingkan bahasa lain.
Perhatikan kode di bawah ini dengan cermat, Anda akan menemukan bahwa cakupan variabel i, j, dan k adalah sama, dan bersifat global di seluruh badan fungsi hujan.
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> function rainman(){ // Ada tiga variabel lokal ijk di isi fungsi rainman var i = 0; k < 3; k++) { peringatan( k ); //Pop up 0 1 2 masing-masing } alert( k ); //Pop up 3 } alert( j );
4. Variabel yang dideklarasikan dalam fungsi didefinisikan di seluruh fungsi.
Pertama perhatikan kode ini:
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; man(); //Panggil man alert( x ); } hujan(); //Panggil hujan</script>
Kode di atas mengilustrasikan bahwa variabel x dapat digunakan di seluruh isi fungsi hujan dan dapat ditugaskan kembali. Karena aturan ini, hasil yang "luar biasa" akan dihasilkan, perhatikan kode di bawah ini.
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); //Munculkan 'tidak terdefinisi' alih-alih 1 var x = 'rain-man'; /pop 'manusia hujan' } hujan();</script>
Hal ini karena variabel lokal x dalam fungsi hujan didefinisikan di seluruh isi fungsi (var x= 'rain-man', dideklarasikan), sehingga variabel global x dengan nama yang sama disembunyikan di seluruh isi fungsi hujan. Alasan mengapa 'tidak terdefinisi' muncul di sini adalah karena ketika alert(x) dijalankan untuk pertama kalinya, variabel lokal x belum diinisialisasi.
Jadi fungsi hujan di atas setara dengan fungsi berikut:
Copy kode kodenya sebagai berikut:
fungsi hujan(){ var x; peringatan( x ); x = 'manusia hujan'; peringatan( x );}
5. Variabel yang didefinisikan tanpa menggunakan kata kunci var adalah variabel global.
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> function rain(){ x = 100; //Variabel global x dideklarasikan dan ditetapkan} rain(); //100 akan muncul </script>
Ini juga merupakan kesalahan umum di kalangan pemula JavaScript, meninggalkan banyak variabel global secara tidak sengaja.
6. Variabel global adalah semua properti dari objek window.
Copy kode kodenya sebagai berikut:
<script type="text/javascript"> var x = 100; peringatan( window.x);//munculkan 100 peringatan(x);</script>
Setara dengan kode berikut
Copy kode kodenya sebagai berikut:
<skrip type="teks/javascript"> jendela.x = 100; peringatan( jendela.x );