Dalam tutorial ini, anda akan belajar mengenai penutupan JavaScript dengan bantuan contoh.
Sebelum anda mengetahui mengenai penutupan, anda perlu memahami dua konsep:
- Fungsi Bersarang
- Mengembalikan fungsi
Fungsi Bersarang JavaScript
Dalam JavaScript, fungsi juga boleh mengandungi fungsi lain. Ini dipanggil fungsi bersarang. Sebagai contoh,
// nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John
Dalam program di atas, greet()fungsi tersebut mengandungi displayName()fungsi di dalamnya.
Mengembalikan Fungsi
Dalam JavaScript, anda juga dapat mengembalikan fungsi dalam fungsi. Sebagai contoh,
function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function
Pengeluaran
function displayName () (console.log ('Hi' + '+ + name);) Hai John
Dalam program di atas, greet()fungsi mengembalikan displayNamedefinisi fungsi.
Di sini, definisi fungsi yang dikembalikan diberikan kepada pemboleh ubah g1. Apabila anda mencetak menggunakan g1 console.log(g1), anda akan mendapat definisi fungsi.
Untuk memanggil fungsi yang disimpan dalam pemboleh ubah g1, kami menggunakan g1()tanda kurung.
Penutupan JavaScript
Dalam JavaScript, penutupan memberikan akses ke ruang lingkup luar fungsi dari dalam fungsi dalam, bahkan setelah fungsi luar ditutup. Sebagai contoh,
// javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value
Pengeluaran
fungsi displayName () (// mengakses pemboleh ubah nama mengembalikan 'Hi' + '' + nama;) Hai John
Dalam contoh di atas, apabila greet()fungsi dipanggil, ia mengembalikan definisi fungsi displayName.
Di sini, g1adalah rujukan displayName()fungsi.
Apabila g1()dipanggil, ia masih mempunyai akses ke greet()fungsi tersebut.
Apabila kita menjalankan console.log(g1), ia mengembalikan definisi fungsi.
Konsep penutupan wujud untuk bahasa pengaturcaraan lain seperti Python, Swift, Ruby, dll.
Mari kita lihat contoh lain.
// closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8
Dalam program di atas, calculate()fungsi mengambil satu argumen xdan mengembalikan definisi multiply()fungsi fungsi. Yang multiply()fungsi mengambil hujah tunggal ydan pulangan x * y.
Keduanya multiply3dan multiply4penutupan.
Yang calculate()fungsi dipanggil lulus parameter x. Bila multiply3dan multiply4dipanggil, multipy()fungsi tersebut mempunyai akses ke argumen x yang berlalu dari calculate()fungsi luar .
Privasi Data
Penutupan JavaScript membantu dalam privasi data program. Sebagai contoh,
let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4
Dalam contoh di atas, sum()fungsi mengembalikan definisi increaseSum()fungsi fungsi.
Pemboleh ubah ditingkatkan di dalam increaseSum()fungsi. Walau bagaimanapun, nilai pemboleh ubah juga dapat diubah di luar fungsi. Dalam kes ini, a = a + 1;mengubah nilai pemboleh ubah di luar fungsi.
Sekarang, jika anda mahu pembolehubah ditingkatkan hanya di dalam fungsi, anda boleh menggunakan penutup. Sebagai contoh,
function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5
Dalam contoh di atas, sum()fungsi menetapkan nilai a hingga 0 dan mengembalikan increaseSum()fungsi.
Kerana penutupan, walaupun sum()sudah dijalankan, increaseSum()masih memiliki akses ke dan dapat menambahkan 1 untuk setiap kali x()dipanggil.
Pembolehubahnya adalah peribadi untuk sum()fungsi tersebut. Ini bermaksud bahawa pemboleh ubah hanya dapat diakses di dalam sum()fungsi.
Walaupun anda menyatakan adan menggunakannya, ini tidak mempengaruhi apemboleh ubah di dalam sum()fungsi.
Catatan : Secara amnya, penutupan digunakan untuk privasi data.
