CLOSURE :
JS de değişkenler static scope’a sahiptir.
Bir değişken local veya global scope’a dahil olabilir.
Bir fonksiyon düşünelim ki ilk oluşturulduğu andaki state’ini sonra herhangi bir zamanda çağrıldığı zaman hatırlasın.
Closurelar tam olarak bu işi yapmak için kullanılan bir js özelliğidir.
Öncelikle bir problem çıkaralım. Sonrasında onu çözmeye çalışalım.
<html>
<body>
<script type="text/javascript">
var a=1;
var lorem= function()
{
var a=2;
return a+1;
}
var ipsum=lorem();
document.write(ipsum)
/*Çıktımız 3 olacak çünkü js de lexical scope'un gereği değişken o andaki scope
içerisinde aranır. Yoksa bir üst scope'a gidilir. Burada bir problem var aslında,
local olarak tanımladığımız değişken sabit gibi oldu.
Ne zaman fonksiyonu çağırsak 3 dönüyor.*/
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var a= 1;
var lorem =function()
{
return a+1;
}
var ipsum =lorem();
document.write(ipsum);
/*Çıktı:2, lorem içerisindeki scope'da bulunmayan a değişkeni için engine,
bir üst yani global scope'a geçerek değişkeni aramış ve bu değişkene
ulaşmıştır.*/
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var a =1;
var lorem= function ()
{
return a+1;
}
var a=93;
var ipsum=lorem();
document.write(ipsum);
/* Çıktı: 94
Bir önceki örneğimiz bozuldu. Çünkü kullandığımız değişken global
olarak tanımlandığı için heryerden ulaşılabiliyor. 1.örnekteki gibi local
tanımladığımızda da her seferinde başa dönerek vasıfsız hale geliyor.
Bize ne lazım :)
- Hem geçmişe dayalı (ilk üretildiği ana dair) değerlere sahip olsun
- Hem de fonksiyonel olabilsin (Kendini tekrar etmesin)
Bu noktada closure kullanıyoruz.
*/
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var a=1;
var lorem= function()
{
var a=2;
return function()
{
return a+=1;
}
}
var a=95;
var ipsum=lorem();
//ipsum=closure yapısı
ipsum();
ipsum();
ipsum();
document.write(ipsum);
/*Bu örnekte lorem fonksiyonu için kendini çağıran fonksiyon şeklinde de
tanımlanabilir*/
</script>
</body>
</html>