Nota Kajian Javascript - Fungsi (6): Skop dan Ruang Nama_Pengetahuan Asas

Dalam pengenalan sebelum ini, kita sudah tahu bahawa Javascript tidak mempunyai skop peringkat blok, hanya skop peringkat fungsi.

Salin kod Kod adalah seperti berikut:

function test() { // skop
for(var i = 0; i                // kira
}
console.log(i); // 10
}

Juga tiada ruang nama yang jelas dalam Javascript, yang bermaksud segala-galanya ditakrifkan dalam skop global. Setiap kali pembolehubah dirujuk, Javascript akan merentasi keseluruhan skop global sehingga ia menemui pembolehubah. Jika pembolehubah tidak ditemui selepas merentasi keseluruhan skop global, ReferenceError akan dilemparkan.

Sila masukkan penerangan imej

Pembolehubah global tersirat

Salin kod Kod adalah seperti berikut:

// skrip A
foo = '42';
// skrip B
var foo = '42'

Dua contoh di atas menghasilkan kesan yang berbeza. Yang pertama akan mentakrifkan pembolehubah foo dalam skop global, manakala yang kedua akan mentakrifkan pembolehubah foo dalam skop semasa.
Kita mesti ambil perhatian bahawa tidak menggunakan kata kunci var akan mempunyai kesan yang tidak dijangka.

Salin kod Kod adalah seperti berikut:

// skop global
var foo = 42;
ujian fungsi() {
// skop tempatan
foo = 21;
}
ujian();
foo; // 21

Memandangkan var tidak digunakan untuk mentakrifkan pembolehubah foo dalam ujian fungsi, pembolehubah global foo di luar fungsi akan ditimpa. Walaupun ia mungkin tidak kelihatan seperti masalah besar, apabila terdapat beribu-ribu baris kod, ini boleh menjadi pepijat yang sukar untuk dijejaki.

Salin kod Kod adalah seperti berikut:

// skop global
var item = [/* beberapa senarai */];
untuk(var i = 0; i subGelung();
}
fungsi subGelung() {
// skop subGelung
for(i = 0; i               // lakukan perkara yang menakjubkan!
}
}

Dalam contoh di atas, gelung luar akan berhenti pada kali pertama ia dilaksanakan, kerana pembolehubah i di dalam fungsi gelung kecil akan menimpa pembolehubah global luar i. Kita hanya perlu menambah var di dalam fungsi untuk mengelakkan ralat ini, jadi kita tidak boleh lupa untuk menambah kata kunci var semasa mentakrifkan pembolehubah. Melainkan jika kita benar-benar mahu mempengaruhi pembolehubah global luaran.

Pembolehubah setempat

Pembolehubah setempat dalam Javascript hanya boleh dijana dalam dua cara, satu adalah untuk mengisytiharkan melalui kata kunci var, dan satu lagi adalah sebagai parameter formal fungsi.

Salin kod Kod adalah seperti berikut:

// skop global
var foo = 1;
bar var = 2;
var i = 2;
ujian fungsi(i) {
// skop tempatan ujian fungsi
i = 5;
var foo = 3;
bar = 4;
}
ujian(10);

Pada masa ini, pembolehubah i dan foo di dalam ujian fungsi ialah pembolehubah tempatan, dan bar akan menimpa bar pembolehubah global luaran.

Mengangkat

Javascript akan menaikkan pengisytiharan pembolehubah, yang bermaksud bahawa ungkapan var dan pengisytiharan fungsi akan dinaikkan ke bahagian atas skop.

Salin kod Kod adalah seperti berikut:

bar();
bar var = function() {};
var someValue = 42;
ujian();
ujian fungsi(data) {
Jika (salah) {
         goo = 1;
} lain {
      var goo = 2;
}
untuk(var i = 0; i       var e = data[i];
}
}

Sebelum menjalankan kod di atas, ungkapan var dan pengisytiharan ujian fungsi akan dinaikkan pangkat ke atas, jadi program akan berjalan seperti biasa dan tiada ralat akan dilaporkan.

Salin kod Kod adalah seperti berikut:

// pernyataan var telah dialihkan ke sini
bar var, someValue; // lalai kepada 'undefined'
// pengisytiharan fungsi juga telah dialihkan
ujian fungsi(data) {
var goo, i, e; // skop blok yang hilang memindahkannya ke sini
Jika (salah) {
         goo = 1;
} lain {
         goo = 2;
}
untuk(i = 0; i          e = data[i];
}
}
bar(); // gagal dengan TypeError kerana bar masih 'tidak ditentukan'
someValue = 42; // tugasan tidak terjejas oleh pengangkatan
bar = function() {};
ujian();

Memandangkan Javascript tidak mempunyai skop peringkat blok, ini bukan sahaja akan meningkatkan ekspresi var, tetapi juga menjadikan struktur if kurang intuitif.
Dalam contoh di atas, walaupun nampaknya jika beroperasi pada pembolehubah global goo, sebenarnya, kerana pembolehubah goo dipromosikan, ia adalah pembolehubah tempatan yang diubah suai.
Tanpa memahami peraturan angkat, anda mungkin berfikir bahawa kod berikut akan membuang ReferenceError.

Salin kod Kod adalah seperti berikut:

// semak sama ada SomeImportantThing telah dimulakan
jika (!Sesuatu yang Penting) {
var SomeImportantThing = {};
}

Sudah tentu kod di atas adalah bebas ralat kerana ungkapan var telah dinaikkan pangkat ke atas sebelum kod dijalankan.

Salin kod Kod adalah seperti berikut:

var SomeImportantThing;
// kod lain mungkin memulakan SomeImportantThing di sini, atau tidak
// pastikan ia ada
jika (!Sesuatu Perkara Penting) {
SomeImportantThing = {};
}

Saya ingin mengesyorkan siaran blog @nightire Fan Ge "Memahami JavaScript (2)", yang menerangkan penambahbaikan dengan sangat teliti.
Pesanan peleraian nama

Apabila cuba mengakses pembolehubah foo dalam skop fungsi, Javascript akan melihat dalam susunan berikut:

Sama ada terdapat takrifan var foo dalam skop semasa.
Sama ada terdapat pembolehubah foo dalam parameter fungsi.
Sama ada fungsi itu sendiri dinamakan foo.
Lompat ke domain luar dan cari dari bahagian pertama.
Ruang nama

Salah satu masalah yang paling biasa ialah konflik penamaan, yang disebabkan oleh Javascript hanya mempunyai satu skop global. Tetapi masalah ini boleh diselesaikan dengan fungsi luaran tanpa nama.

Salin kod Kod adalah seperti berikut:

(fungsi() {
// "ruang nama" yang mengandungi diri
window.foo = function() {
                // penutupan terdedah
};
})(); // laksanakan fungsi dengan segera

Fungsi tanpa nama dalam contoh di atas dianggap sebagai ungkapan, jadi ia akan dilaksanakan.

Salin kod Kod adalah seperti berikut:

( // nilaikan fungsi di dalam kurungan
fungsi() {}
) // dan kembalikan objek fungsi
() // panggil keputusan penilaian

Sudah tentu kita juga boleh memanggil ungkapan fungsi dengan cara lain, dengan struktur yang berbeza, tetapi kesan yang sama.

Salin kod Kod adalah seperti berikut:

// Beberapa gaya lain untuk menggunakan terus
!function(){}()
function(){}()
(fungsi(){}());
// dan seterusnya...

Ringkasan

Adalah disyorkan agar anda menggunakan fungsi luaran tanpa nama untuk merangkum kod ke dalam ruang Ini bukan sahaja dapat menyelesaikan konflik ruang nama, tetapi juga memudahkan pemodulatan program.
Selain itu, menggunakan pembolehubah global bukanlah amalan yang baik, kerana ia memerlukan kos penyelenggaraan dan terdedah kepada ralat.

Jenis ruang nama, fungsi, pembolehubah, templat, dll. semuanya milik entiti.
Perkara utama yang mempunyai persamaan entiti ialah mereka boleh mempunyai nama. (Selain itu, label juga boleh mempunyai nama, tetapi ia bukan entiti.)
Skop ruang nama ialah istilah umum untuk jenis skop, disandingkan dengan skop blok, skop kelas, skop prototaip fungsi dan skop fungsi (hanya sah untuk label). Nama yang diisytiharkan dalam ruang nama adalah dalam skop ruang nama. Nama global dianggap berada dalam skop ruang nama global yang tersirat.

Peranan ruang nama sememangnya skop, tetapi ia berbeza daripada skop ringkas Anda boleh mengisytiharkan ruang nama yang sama berbilang kali di beberapa tempat, tetapi kandungannya tidak boleh ditakrifkan semula menjadi satu nama. Ruang, sama seperti std, takrifan makro di mana-mana