Closure dalam JavaScript

Artikel ini menerangkan tentang closure dalam JavaScript.

YouTube Video

Closure dalam JavaScript

Dalam JavaScript, 'closure' adalah salah satu konsep yang sangat penting dan berkuasa. Dengan memahami closure, anda boleh memperoleh pengetahuan yang berguna dalam pelbagai situasi, seperti tingkah laku dan skop fungsi, serta pemprosesan tak segerak dan pengendalian acara dalam JavaScript. Di sini, kami akan menerangkan secara terperinci segala-galanya daripada definisi asas closure sehinggalah kepada contoh konkrit dan aplikasinya.

Apakah itu Closure?

Closure merujuk kepada mekanisme di mana suatu fungsi boleh mengakses pembolehubah dalam skop penciptaannya walaupun ia dipanggil di luar skop tersebut. Dengan menggunakan closure, fungsi dapat 'mengingati' pembolehubah luaran secara berterusan.

Closure terdiri daripada dua elemen berikut.

1. Definisi fungsi (fungsi itu sendiri)

2. Skop di mana fungsi ditakrifkan (pembolehubah dan fungsi lain di luar fungsi itu sendiri)

Dalam JavaScript, closure boleh berlaku kerana fungsi mempunyai keupayaan untuk mengakses pembolehubah dalam skop asalnya.

Contoh Asas

Pertama, mari kita lihat satu contoh asas closure. Dalam kod berikut, outerFunction memulangkan satu fungsi bernama innerFunction. Perkara penting di sini ialah innerFunction boleh mengakses pembolehubah count yang ditakrif dalam skop outerFunction.

 1function outerFunction() {
 2    let count = 0;
 3
 4    function innerFunction() {
 5        count++;
 6        console.log(`Current count: ${count}`);
 7    }
 8
 9    return innerFunction;
10}
11
12const counter = outerFunction();
13counter(); // Current count: 1
14counter(); // Current count: 2
15counter(); // Current count: 3

Bagaimana Closure Berfungsi

Seperti yang dilihat dalam contoh di atas, count disimpan oleh innerFunction walaupun outerFunction telah selesai dijalankan. innerFunction boleh terus mengakses skop outerFunction, oleh itu count boleh dikemas kini dalam innerFunction. Inilah mekanisme asas closure.

innerFunction diberikan kepada pembolehubah counter, dan kita dapat lihat bahawa keadaan count tetap terpelihara walaupun outerFunction telah selesai dijalankan. Ini kerana JavaScript sentiasa 'mengingati' skop pada masa fungsi itu didefinisikan.

Aplikasi: Closure Sebagai Pembolehubah Peribadi

Closure boleh digunakan sebagai 'pembolehubah peribadi' dalam pengaturcaraan berorientasikan objek. Biasanya, sifat objek dalam JavaScript boleh diakses secara langsung dari luar, tetapi dengan menggunakan closure, anda boleh menghalang manipulasi terus pembolehubah dalam skop fungsi daripada luar.

Dalam contoh seterusnya, fungsi createCounter menggunakan closure untuk mencipta kaunter dan memulangkan kaunter yang mempunyai pembolehubah peribadi count.

 1function createCounter() {
 2    let count = 0;
 3
 4    return {
 5        increment: function() {
 6            count++;
 7            console.log(`Count: ${count}`);
 8        },
 9        decrement: function() {
10            count--;
11            console.log(`Count: ${count}`);
12        },
13        getCount: function() {
14            return count;
15        }
16    };
17}
18
19const myCounter = createCounter();
20myCounter.increment(); // Count: 1
21myCounter.increment(); // Count: 2
22myCounter.decrement(); // Count: 1
23console.log(myCounter.getCount()); // 1

Dalam contoh ini, count berada dalam skop fungsi createCounter, jadi ia tidak boleh diakses secara langsung dari luar. Walau bagaimanapun, ia boleh dimanipulasi melalui kaedah increment dan decrement. Dengan cara ini, menggunakan closure membolehkan anda memasukkan konsep pembolehubah peribadi dalam JavaScript.

Contoh Praktikal Closure

Gabungan dengan Fungsi Panggilan Balik

Closure sering digunakan bersama fungsi panggilan balik untuk menguruskan pemprosesan tak segerak. Sebagai contoh, mari kita lihat contoh penggunaan pemasa.

 1function startTimer(duration) {
 2    let timeLeft = duration;
 3
 4    function countdown() {
 5        console.log(`Time left: ${timeLeft} seconds`);
 6        timeLeft--;
 7
 8        if (timeLeft >= 0) {
 9            setTimeout(countdown, 1000);
10        }
11    }
12
13    countdown();
14}
15
16startTimer(5);
17// Time left: 5 seconds
18// Time left: 4 seconds
19// Time left: 3 seconds
20// Time left: 2 seconds
21// Time left: 1 second
22// Time left: 0 seconds

Dalam contoh ini, fungsi countdown mengakses pembolehubah timeLeft dalam skop startTimer. Dengan cara ini, closure amat berguna untuk pemprosesan tak segerak seperti pemasa, kerana ia mengekalkan keadaan pembolehubah sepanjang masa.

Pengendali Acara

Closure juga sangat berguna ketika menyediakan pengendali acara. Dalam contoh berikut, closure digunakan untuk merekodkan bilangan kali butang diklik.

 1function setupClickCounter(buttonId) {
 2    let clickCount = 0;
 3
 4    const button = document.getElementById(buttonId);
 5    button.addEventListener('click', function() {
 6        clickCount++;
 7        console.log(`Button clicked ${clickCount} times`);
 8    });
 9}
10
11setupClickCounter('myButton');

Dalam kes ini, clickCount meningkat dengan setiap klik, dan nilainya dikekalkan. Dengan menggunakan closure, anda boleh menetapkan kaunter bebas untuk setiap butang.

Kesimpulan

Closure ialah konsep yang melambangkan fleksibiliti dan kekuatan JavaScript. Ia menyimpan pembolehubah yang terkandung dalam skop fungsi dan membenarkan operasi ke atas pembolehubah itu melalui fungsi yang boleh diakses dari luar. Dengan memahami dan memanfaatkan mekanisme ini, anda boleh menguasai teknik yang lebih maju dalam pengekodan JavaScript.

Closure digunakan dalam pelbagai situasi, daripada pengendalian acara dan pemprosesan tak segerak sehinggalah kepada pseudo-implementasi pengaturcaraan berorientasikan objek.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video