Mga Closure sa JavaScript

Ipinaliliwanag ng artikulong ito ang mga closure sa JavaScript.

YouTube Video

Mga Closure sa JavaScript

Sa JavaScript, ang 'closure' ay isa sa mga napakahalaga at makapangyarihang konsepto. Sa pamamagitan ng pag-unawa sa mga closure, makakakuha ka ng kaalaman na kapaki-pakinabang sa maraming sitwasyon, tulad ng gawi at saklaw ng mga function, pati na rin ang asynchronous na pagproseso at paghawak ng mga kaganapan sa JavaScript. Dito, ipapaliwanag namin nang detalyado ang lahat mula sa pangunahing kahulugan ng closures hanggang sa mga konkretong halimbawa at ang kanilang mga aplikasyon.

Ano ang Closure?

Ang closure ay tumutukoy sa mekanismo kung saan ang isang function ay maaaring ma-access ang mga variable sa saklaw ng paglikha nito kahit na tawagin ito sa labas ng saklaw na iyon. Sa paggamit ng mga closure, nagiging posible para sa mga function ang patuloy na 'tandaan' ang mga panlabas na variable.

Ang mga closure ay binubuo ng sumusunod na dalawang elemento.

1. Paglalarawan ng Function (ang mismong function)

2. Saklaw kung saan tinutukoy ang function (mga variable at iba pang mga function sa labas ng mismong function)

Sa JavaScript, posible ang mga closure dahil ang mga function ay may kakayahang ma-access ang mga variable sa loob ng saklaw kung saan sila nilikha.

Pangunahing Halimbawa

Una, tingnan natin ang isang pangunahing halimbawa ng isang closure. Sa sumusunod na code, ang outerFunction ay nagbabalik ng isang function na tinatawag na innerFunction. Ang mahalagang punto ay ang innerFunction ay maaaring ma-access ang variable na count na tinukoy sa loob ng saklaw ng 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

Paano Gumagana ang Mga Closure

Tulad ng nakikita sa halimbawa sa itaas, ang count ay napananatili ng innerFunction kahit pagkatapos maisakatuparan ang outerFunction. Ang innerFunction ay maaaring magpatuloy na ma-access ang saklaw ng outerFunction, kaya't ang count ay ina-update sa loob ng innerFunction. Ito ang pangunahing mekanismo ng isang closure.

Ang innerFunction ang iniuugnay sa variable na counter, at makikita natin na ang estado ng count ay napananatili kahit natapos na ang pagtakbo ng outerFunction. Ito ay dahil ang JavaScript ay patuloy na 'natatandaan' ang saklaw sa panahon ng pagtukoy ng function.

Aplikasyon: Mga Closure bilang Pribadong Variable

Maaaring gamitin ang closures tulad ng 'mga pribadong variable' sa object-oriented na programming. Sa normal na JavaScript, ang mga katangian ng object ay direktang naa-access mula sa labas, ngunit sa pamamagitan ng paggamit ng closures, posible na maiwasan ang direktang manipulasyon ng mga variable sa loob ng saklaw ng function mula sa labas.

Sa susunod na halimbawa, ang function na createCounter ay gumagamit ng closure upang lumikha ng counter at nagbabalik ng counter na may pribadong variable na 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

Sa halimbawang ito, ang count ay nasa loob ng saklaw ng function na createCounter, kaya hindi ito maaaring direktang ma-access mula sa labas. Gayunpaman, maaari itong i-manipulate sa pamamagitan ng mga method na increment at decrement. Sa ganitong paraan, sa pamamagitan ng paggamit ng closures, maaari kang magpatupad ng konsepto ng mga pribadong variable sa JavaScript.

Praktikal na Mga Halimbawa ng Closures

Kumbinasyon sa Callback Functions

Ang closures ay madalas na ginagamit kasabay ng callback functions upang pamahalaan ang asynchronous na pagpoproseso. Halimbawa, tingnan natin ang isang halimbawa gamit ang timer.

 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

Sa halimbawang ito, ina-access ng function na countdown ang variable na timeLeft sa loob ng saklaw ng startTimer. Sa ganitong paraan, ang closures ay napaka-kapaki-pakinabang para sa asynchronous na pagpoproseso tulad ng timers, dahil pinapanatili nila ang estado ng mga variable sa paglipas ng panahon.

Mga Event Handler

Ang closures ay maginhawa rin kapag nagse-set up ng mga event handler. Sa sumusunod na halimbawa, ginagamit ang closure upang itala ang bilang ng mga beses na na-click ang isang button.

 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');

Sa kasong ito, ang clickCount ay tumataas sa bawat click, at nananatili ang halaga nito. Sa pamamagitan ng paggamit ng closures, maaari kang magtalaga ng isang independiyenteng counter sa bawat button.

Konklusyon

Ang closures ay isang konsepto na sumasagisag sa kakayahang umangkop at kapangyarihan ng JavaScript. Hawak nila ang mga variable na nakapaloob sa saklaw ng function at nagbibigay-daan sa mga operasyon sa mga variable na iyon sa pamamagitan ng mga function na naa-access mula sa labas. Sa pamamagitan ng pag-unawa at paggamit sa mekanismong ito, maaari kang makakuha ng mas advanced na mga teknika sa JavaScript coding.

Ang closures ay ginagamit sa iba't ibang sitwasyon, mula sa paghawak ng event at asynchronous na pagpoproseso hanggang sa mga pseudo-implementation ng object-oriented na programming.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video