Konten utama:
1. Menganalisis makna cakupan leksikal JavaScript
2. Mengurai rantai cakupan variabel
3. Apa yang terjadi jika nama variabel dipromosikan?
Baru-baru ini, saya menjelaskan kursus JavaScript di Podcast Chuanzhi. Banyak teman yang merasa JavaScript sangat sederhana, tetapi mereka tidak tahu cara menggunakannya, jadi saya menyiapkan beberapa konten untuk dibagikan kepada Anda.
Seri ini terutama menjelaskan bagian lanjutan dari JavaScript, termasuk rantai cakupan, penutupan, pola pemanggilan fungsi, prototipe, dan hal-hal berorientasi objek. Sintaks dasar JavaScript tidak disertakan di sini : Kunjungi //net.itcast.cn untuk download video gratis untuk pembelajaran. Oke, tanpa basa-basi lagi langsung saja ke topik kita.
1. Tentang cakupan tingkat blok
Berbicara tentang cakupan variabel JavaScript, ini berbeda dengan bahasa mirip C yang biasa kita gunakan.
Misalnya kode berikut di C#:
Copy kode kodenya sebagai berikut:
kekosongan statis Utama (string[] args)
{
jika (benar)
{
int angka = 10;
}
Sistem.Konsol.WriteLine(angka);
}
Jika kode ini dikompilasi, maka tidak akan lolos karena "nama num tidak ada dalam konteks saat ini".
Cakupan variabel dibatasi oleh kurung kurawal dan disebut cakupan tingkat blok.
Dalam cakupan tingkat blok, semua variabel berada dalam kurung kurawal definisi, dari awal definisi hingga akhir kurung kurawal.
Itu dapat digunakan dalam cakupan tersebut. Itu tidak dapat diakses di luar cakupan ini
Copy kode kodenya sebagai berikut:
jika (benar)
{
int angka = 10;
Sistem.Konsol.WriteLine(angka);
}
Ini dapat diakses di sini karena variabel didefinisikan dan digunakan dalam kurung kurawal yang sama.
Namun berbeda di JavaScript. Tidak ada konsep cakupan tingkat blok di JavaScript.
2. Cakupan dalam JavaScript
Dalam JavaScript, kode berikut:
Copy kode kodenya sebagai berikut:
jika(benar) {
varnum = 10;
}
peringatan(angka);
Hasil dari operasi ini adalah jendela pop-up 10. Jadi bagaimana cakupan variabel dibatasi dalam JavaScript?
2.1 Fungsi membatasi cakupan variabel
Dalam JavaScript, hanya fungsi yang dapat membatasi ruang lingkup suatu variabel.
Artinya, dalam JavaScript, variabel yang didefinisikan dalam suatu fungsi dapat diakses di dalam fungsi tersebut, namun di luar fungsi tersebut
Tidak dapat mengakses. Lihat kode berikut:
Copy kode kodenya sebagai berikut:
var fungsi = fungsi() {
varnum = 10;
};
mencoba {
peringatan(angka);
} menangkap ( e ) {
peringatan(e);
}
Saat kode ini dijalankan, pengecualian akan dilempar dan variabel num tidak ditentukan. Dengan kata lain, variabel yang ditentukan dalam fungsi tidak bisa
Digunakan di luar fungsi, tentunya dapat digunakan secara bebas di dalam fungsi, bahkan sebelum ditugaskan.
Copy kode kodenya sebagai berikut:
var fungsi = fungsi() {
peringatan(angka);
varnum = 10;
peringatan(angka);
};
mencoba {
fungsi();
} menangkap ( e ) {
peringatan(e);
}
Setelah kode ini dijalankan, tidak ada kesalahan yang akan muncul, dan jendela pop-up akan muncul dua kali, masing-masing tidak terdefinisi dan 10 (untuk alasannya, saya akan jelaskan di bawah).
Dari sini dapat dilihat bahwa variabel hanya dapat diakses di dalam suatu fungsi. Demikian pula fungsi di dalam fungsi tersebut juga dapat diakses.
2.2 Subdomain mengakses domain induk
Seperti disebutkan sebelumnya, suatu fungsi dapat membatasi ruang lingkup suatu variabel, sehingga fungsi dalam fungsi tersebut menjadi subdomain dari ruang lingkup tersebut
Kode di dapat mengakses variabel di domain induk. Lihat kode berikut:
Copy kode kodenya sebagai berikut:
var fungsi = fungsi() {
varnum = 10;
var sub_func = fungsi() {
peringatan(angka);
};
sub_fungsi();
};
fungsi();
Hasil eksekusi kode ini adalah 10. Anda dapat melihat variabel access yang disebutkan di atas, tetapi ketika mengakses domain induk di domain anak
Kode tersebut juga bersifat kondisional. Seperti kode berikut:
Copy kode kodenya sebagai berikut:
var fungsi = fungsi() {
varnum = 10;
var sub_func = fungsi() {
varnum = 20;
peringatan(angka);
};
sub_fungsi();
};
fungsi();
Kode ini memiliki satu lagi "var num = 20;" dibandingkan sebelumnya.
Ada perubahan, hasil yang dicetak kode ini adalah 20. Artinya, angka yang diakses subdomain saat ini adalah variabel yang ada di subdomain, bukan domain induk.
Terlihat bahwa ada aturan tertentu untuk akses. Saat menggunakan variabel dalam JavaScript, penerjemah JavaScript terlebih dahulu
Cari domain pengguna untuk melihat apakah ada definisi variabel. Jika ya, gunakan variabel ini; jika tidak, cari variabel di domain induk.
Dengan analogi, hingga cakupan tingkat atas masih belum ditemukan, pengecualian "variabel tidak ditentukan" akan dilempar. Lihat kode berikut:
Copy kode kodenya sebagai berikut:
(fungsi() {
varnum = 10;
(fungsi() {
varnum = 20;
(fungsi(){
peringatan(angka);
})()
})();
})();
Setelah kode ini dijalankan, 20 dicetak. Jika "var num = 20;" dihapus, maka 10 dicetak
"var num = 10", maka akan terjadi kesalahan yang tidak ditentukan.
3. Rantai lingkup
Dengan pembagian cakupan JavaScript, cakupan akses JavaScript dapat dihubungkan ke dalam struktur pohon berantai.
Setelah rantai cakupan JavaScript dapat dipahami dengan jelas, maka variabel dan penutupan JavaScript akan menjadi sangat jelas.
Metode berikut menggunakan gambar untuk menggambar rantai lingkup.
3.1 Aturan menggambar:
1) Rantai cakupan adalah serangkaian objek
2) Semua skrip adalah rantai level 0, setiap objek menempati satu posisi
3) Setiap kali Anda melihat suatu fungsi meluas menjadi sebuah rantai, perluas fungsi tersebut tingkat demi tingkat.
4) Saat mengakses, pertama-tama lihat fungsi saat ini. Jika tidak ditentukan, periksa rantainya.
5) Ulangi ini sampai rantai level 0
3.2 Contoh
Lihatlah kode di bawah ini:
Copy kode kodenya sebagai berikut:
varnum = 10;
var func1 = fungsi() {
varnum = 20;
var func2 = fungsi() {
varnum = 30;
peringatan(angka);
};
fungsi2();
};
var func2 = fungsi() {
varnum = 20;
var func3 = fungsi() {
peringatan(angka);
};
fungsi3();
};
fungsi1();
fungsi2();
Mari kita analisis kode ini:
-> Pertama-tama, seluruh kode adalah cakupan global dan dapat ditandai sebagai rantai cakupan level 0. Lalu ada array
var link_0 = [num, func1, func2];//Dijelaskan di sini dengan kode semu
-> Di sini func1 dan func2 keduanya merupakan fungsi, sehingga diturunkan dua rantai cakupan level 1, yaitu
var link_1 = { func1: [ num, func2 ] }; // Dijelaskan di sini dengan kode semu
var link_1 = { func2: [ num, func3 ] }; // Dijelaskan di sini dengan kode semu
-> Rantai level 1 pertama berasal dari rantai level 2
var link_2 = { func2: [ num ] }; // Dijelaskan di sini dengan kode semu
-> Rantai level 1 kedua tidak memiliki variabel yang ditentukan dan merupakan rantai kosong, yang dinyatakan sebagai
var link_2 = { fungsi3: [ ] };
-> Dengan mengintegrasikan kode di atas, rantai cakupan dapat dinyatakan sebagai:
Copy kode kodenya sebagai berikut:
//Dijelaskan di sini dengan kode semu
var link = [ // Rantai level 0
nomor,
{ func1 : [ // Rantai level 1 pertama
nomor,
{ func2 : [ // Rantai tingkat 2
nomor
] }
]},
{ func2 : [ // Rantai level 1 kedua
nomor,
{ fungsi3 : [] }
]}
];
-> Diwakili sebagai gambar sebagai
Gambar: 01_01 scope chain.bmp
Catatan: Gunakan kode js untuk mengekspresikan diagram rantai, dan akan sangat jelas saat disorot.
Dengan diagram rantai cakupan ini, Anda dapat dengan jelas memahami bagaimana pengaksesan variabel dilakukan:
Saat Anda perlu menggunakan suatu variabel, cari dulu variabel tersebut pada rantai saat ini. Jika Anda menemukannya, gunakan langsung No
Cari ke atas; jika tidak ditemukan, maka cari rantai cakupan satu tingkat hingga rantai cakupan tingkat 0.
Jika Anda dapat dengan jelas menentukan tingkat rantai cakupan yang dimiliki suatu variabel, maka saat menganalisis JavaScript
Sangat mudah dalam hal pengkodean dan menggunakan fitur JavaScript tingkat lanjut seperti penutupan (setidaknya bagi saya).
3. Promosi nama variabel dan promosi nama fungsi
Dengan rantai cakupan dan aturan akses variabel, terdapat masalah yang sangat pelik. Mari kita lihat yang berikut ini terlebih dahulu
Kode JavaScript:
Copy kode kodenya sebagai berikut:
varnum = 10;
var fungsi = fungsi() {
peringatan(angka);
varnum = 20;
peringatan(angka);
};
fungsi();
Apa hasil eksekusinya? Anda bisa memikirkannya, saya belum akan mengungkapkan jawabannya.
Mari kita analisis kode ini terlebih dahulu.
Ada rantai cakupan level 0 dalam kode ini, yang berisi nomor anggota dan fungsi. Di bawah fungsi, ada fungsi level 1.
Rantai domain, yang berisi nomor anggota. Oleh karena itu, saat memanggil fungsi func, akan terdeteksi bahwa dalam cakupan saat ini
Variabel num telah ditentukan, jadi variabel ini akan digunakan. Namun, num tidak diberi nilai saat ini, karena kodenya
Kode dijalankan dari atas ke bawah. Oleh karena itu, cetakan pertama tidak ditentukan, dan cetakan kedua adalah 20.
Apakah Anda melakukannya dengan benar?
Dalam JavaScript juga umum untuk mendefinisikan kode di belakang dan menggunakannya di depan seperti ini
Pertanyaannya saat ini seolah-olah variabel sudah didefinisikan di awal, dan hasilnya seperti kode berikut:
Copy kode kodenya sebagai berikut:
varnum = 10;
var fungsi = fungsi() {
var num;// Rasanya sudah didefinisikan di sini, tetapi tidak ada penugasan.
peringatan(angka);
varnum = 20;
peringatan(angka);
};
fungsi();
Fenomena ini sering disebut promosi nama variabel. Ada juga promosi nama fungsi, misalnya kode berikut:
Copy kode kodenya sebagai berikut:
var fungsi = fungsi() {
alert("Panggil fungsi eksternal");
};
var foo = fungsi() {
fungsi();
var fungsi = fungsi() {
alert("Panggil fungsi internal");
};
fungsi();
};
Oke, seperti apa kode ini? Atau harus ada sesuatu yang berbeda, saya tidak akan membiarkan pembaca berpikir!
Jawabannya akan saya berikan pada artikel berikutnya.
Karena perbedaan ini, selama pengembangan sebenarnya, disarankan untuk menulis semua variabel di awal.
Artinya, variabel didefinisikan di awal fungsi, mirip dengan ketentuan bahasa C. Hal ini juga berlaku di perpustakaan js.
Ini dilakukan, seperti jQuery, dll.
4. Ringkasan
Oke, artikel ini terutama menjelaskan tentang cakupan leksikal JavaScript, dan penjelasannya.
Bagaimana cara menganalisis rantai cakupan dan status akses variabel? Mari selesaikan dengan satu latihan lagi! ! !
Lihat apa hasil eksekusi kode di bawah ini:
Copy kode kodenya sebagai berikut:
if( ! "a" di jendela ) {
var a = "tentukan variabel";
}
peringatan(a);