JavaScript’te Kapan\u0131mlar (Closures): Tam Bir Rehber ve \u00d6rnekler<\/p>\n
JavaScript’te kapan\u0131mlar, fonksiyonlar\u0131n kapsam\u0131 ve belle\u011fi hakk\u0131nda g\u00fc\u00e7l\u00fc bir kavramd\u0131r. Fonksiyonlar\u0131n kendi i\u00e7indeki de\u011fi\u015fkenlere eri\u015fme ve hat\u0131rlama yetene\u011fini sa\u011flar. Bu rehberde, kapan\u0131mlar\u0131 derinlemesine inceleyece\u011fiz ve nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131, ne zaman kullan\u0131ld\u0131klar\u0131n\u0131 ve ne zaman kullan\u0131ld\u0131\u011f\u0131n\u0131 \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n
Kapan\u0131mlar, JavaScript’te bir fonksiyonun tan\u0131mland\u0131\u011f\u0131 yerin d\u0131\u015f\u0131nda dahi, fonksiyonun kapsam\u0131ndaki de\u011fi\u015fkenlere eri\u015febildi\u011fi bir mekanizmad\u0131r. Ba\u015fka bir deyi\u015fle, bir i\u00e7 fonksiyon, d\u0131\u015f fonksiyonun kapsam\u0131ndaki de\u011fi\u015fkenlere eri\u015febilir ve bunlar\u0131 “hat\u0131rlayabilir”.<\/p>\n
Bu \u00f6zelli\u011fi a\u00e7\u0131klamak i\u00e7in basit bir \u00f6rnek:<\/p>\n
“`javascript
\nfunction outerFunction() {
\n let outerVar = “D\u0131\u015f De\u011fi\u015fken”;<\/p>\n
function innerFunction() {
\n console.log(outerVar);
\n }<\/p>\n
return innerFunction;
\n}<\/p>\n
let myInnerFunction = outerFunction();
\nmyInnerFunction(); \/\/ \u00c7\u0131kt\u0131: “D\u0131\u015f De\u011fi\u015fken”
\n“`<\/p>\n
Yukar\u0131daki \u00f6rnekte, Kapan\u0131mlar\u0131n JavaScript’te birka\u00e7 \u00f6nemli avantaj\u0131 vard\u0131r:<\/p>\n Kapan\u0131mlar, bir\u00e7ok farkl\u0131 uygulamada kullan\u0131l\u0131r:<\/p>\n Kapan\u0131mlar, bellekte yer kaplayan nesnelerdir. Bir fonksiyonun kapsam\u0131 sona erdi\u011finde bile, i\u00e7 fonksiyonlar\u0131n kullanabilece\u011fi de\u011fi\u015fkenler bellekten silinmez. Bu nedenle, kapan\u0131mlar\u0131n dikkatli kullan\u0131lmas\u0131 \u00f6nemlidir, aksi takdirde bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilirler.<\/p>\n Bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilecek baz\u0131 durumlar:<\/p>\n Kapan\u0131mlar\u0131n JavaScript’te nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steren baz\u0131 \u00f6rnekler:<\/p>\n “`javascript return function() { let myCounter = counter(); Bu \u00f6rnekte, “`javascript button.addEventListener(‘click’, function() {innerFunction<\/code>, outerFunction<\/code>‘\u0131n kapsam\u0131ndaki outerVar<\/code> de\u011fi\u015fkenine eri\u015febilir ve de\u011ferini yazd\u0131rabilir. Bu, innerFunction<\/code>, outerFunction<\/code>‘\u0131n kapsam\u0131n\u0131 “kapatt\u0131\u011f\u0131” ve outerVar<\/code> de\u011fi\u015fkenine eri\u015febildi\u011fi i\u00e7in m\u00fcmk\u00fcnd\u00fcr.<\/p>\nKapan\u0131mlar Neden \u00d6nemlidir?<\/h2>\n
\n
Kapan\u0131mlar\u0131n Kullan\u0131m Alanlar\u0131<\/h2>\n
\n
Kapan\u0131mlar ve Bellek Y\u00f6netimi<\/h2>\n
\n
\u00d6rnekler<\/h2>\n
1. Saya\u00e7 \u00d6rne\u011fi<\/h3>\n
\nfunction counter() {
\n let count = 0;<\/p>\n
\n count++;
\n return count;
\n };
\n}<\/p>\n
\nconsole.log(myCounter()); \/\/ \u00c7\u0131kt\u0131: 1
\nconsole.log(myCounter()); \/\/ \u00c7\u0131kt\u0131: 2
\nconsole.log(myCounter()); \/\/ \u00c7\u0131kt\u0131: 3
\n“`<\/p>\ncounter<\/code> fonksiyonu, bir saya\u00e7 de\u011feri tutan bir kapan\u0131m d\u00f6nd\u00fcr\u00fcr. myCounter<\/code> de\u011fi\u015fkenine atanm\u0131\u015f olan kapan\u0131m, her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda sayac\u0131n de\u011ferini art\u0131r\u0131r.<\/p>\n2. Olay \u0130\u015fleyicisi \u00d6rne\u011fi<\/h3>\n
\nlet button = document.getElementById(‘myButton’);<\/p>\n
\n console.log(‘D\u00fc\u011fmeye t\u0131kland\u0131!’);
\n});
\n“`<\/p>\n