Penutupan JavaScript
Variabel JavaScript dapat termasuk dalam lingkup lokal atau global .
Variabel global dapat dibuat lokal (pribadi) dengan penutupan .
Variabel Global
A functiondapat mengakses semua variabel yang didefinisikan di dalam fungsi, seperti ini:
Contoh
function myFunction() {
let a = 4;
return a * a;
}
Tetapi a functionjuga dapat mengakses variabel yang ditentukan di luar fungsi, seperti ini:
Contoh
let a = 4;
function myFunction() {
return a * a;
}
Dalam contoh terakhir, a adalah variabel global .
Di halaman web, variabel global milik objek jendela.
Variabel global dapat digunakan (dan diubah) oleh semua skrip di halaman (dan di jendela).
Pada contoh pertama, a adalah variabel lokal .
Variabel lokal hanya dapat digunakan di dalam fungsi di mana ia didefinisikan. Itu disembunyikan dari fungsi lain dan kode skrip lainnya.
Variabel global dan lokal dengan nama yang sama adalah variabel yang berbeda. Memodifikasi satu, tidak mengubah yang lain.
Variabel yang dibuat tanpa kata kunci deklarasi ( var,
let, atau const) selalu bersifat global, meskipun dibuat di dalam suatu fungsi.
Contoh
function myFunction() {
a = 4;
}
Variabel Seumur Hidup
Variabel global hidup sampai halaman dibuang, seperti saat Anda menavigasi ke halaman lain atau menutup jendela.
Variabel lokal memiliki umur yang pendek. Mereka dibuat saat fungsi dipanggil, dan dihapus saat fungsi selesai.
Sebuah Dilema Kontra
Misalkan Anda ingin menggunakan variabel untuk menghitung sesuatu, dan Anda ingin penghitung ini tersedia untuk semua fungsi.
Anda dapat menggunakan variabel global, dan a functionuntuk meningkatkan penghitung:
Contoh
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Ada masalah dengan solusi di atas: Kode apa pun di halaman dapat mengubah penghitung, tanpa memanggil add().
Penghitung harus lokal ke add()fungsi, untuk mencegah kode lain mengubahnya:
Contoh
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Itu tidak berhasil karena kami menampilkan penghitung global alih-alih penghitung lokal.
Kami dapat menghapus penghitung global dan mengakses penghitung lokal dengan membiarkan fungsi mengembalikannya:
Contoh
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
Itu tidak berhasil karena kami mengatur ulang penghitung lokal setiap kali kami memanggil fungsi.
Fungsi dalam JavaScript dapat menyelesaikan ini.
Fungsi Bersarang JavaScript
Semua fungsi memiliki akses ke lingkup global.
Faktanya, dalam JavaScript, semua fungsi memiliki akses ke ruang lingkup "di atas" mereka.
JavaScript mendukung fungsi bersarang. Fungsi bersarang memiliki akses ke ruang lingkup "di atas" mereka.
Dalam contoh ini, fungsi dalam plus()memiliki akses ke countervariabel dalam fungsi induk:
Contoh
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Ini bisa menyelesaikan kontra dilema, jika kita bisa mencapai plus()
fungsi dari luar.
Kita juga perlu menemukan cara untuk mengeksekusi counter = 0hanya sekali.
Kami membutuhkan penutupan.
Penutupan JavaScript
Ingat fungsi self-invoking? Apa fungsi ini lakukan?
Contoh
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Contoh Dijelaskan
Variabel addditetapkan ke nilai kembalian dari fungsi self-invoking.
Fungsi self-invoking hanya berjalan sekali. Ini mengatur penghitung ke nol (0), dan mengembalikan ekspresi fungsi.
Dengan cara ini add menjadi sebuah fungsi. Bagian "luar biasa" adalah ia dapat mengakses penghitung di ruang lingkup induk.
Ini disebut penutupan JavaScript. Itu memungkinkan suatu fungsi memiliki variabel " pribadi ".
Penghitung dilindungi oleh cakupan fungsi anonim, dan hanya dapat diubah menggunakan fungsi tambah.
Penutupan adalah fungsi yang memiliki akses ke ruang lingkup induk, bahkan setelah fungsi induk ditutup.