Javascript Closure Yapısını Anlayalım

Closures (Kapamalar) Javascript’in güçlü ve yaygın olarak kullanılan bir özelliğidir, ancak bir acemi programcı için biraz kafa karıştırıcı olabilir.

Javascript’de daha iyi kodlama yapabilmek için biraz derinlemesine bu konunun bilinmesi gereklidir. Örneklere geçmeden önce, kapatmanın ne olduğu ve ne işe yaradığına bakalım.

Kapamalar Lexical Environmentları birbirinden ayıran sınırlar olarak değerlendirebiliriz. Curly Bracket’ler “{}” ile bu scope’lar birbirinden ayrılırlar.

Kapamaları ve kapsamlarını iyi anlamak için Lexical Environment nedir bunu da bilmemiz gerekir.


Lexical Environment için örnek gösterim

Yukarıdaki şemada gördüğünüz kareler bir Lexical environment olsun, kodu okuduğunuzda A değişkeninin “var” ile LE2 içerisinde tanımlandığını göreceksiniz. Buna rağmen Javascript motoru LE2'nin LE1'in bir alt scope’u olduğunu anlayarak A değişkenini click eventinin içerisine taşıdığını ve orada tanıdığını görebilirsiniz.

Durum böyle iken aynı javascript motoru let ile tanımlanmış B’yi click eventinin içerisine taşımıyor, çünkü “let” anahtarı LE2 içersinde başka bir B değişkeni oluşturuyor (aslında şöyle düşünün; ilk B değişkeni LE1.B, let ile tanımlanan B ise LE1.LE2.B şeklinde oluyor)

Sonuç, Closure’lar bu Lexical Environment’ları belirleyen kapama sınırlarıdır.

Lexical Environment : it’s the internal js engine construct that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and variable is the reference to actual object [including function type object] or primitive value). A lexical environment also holds a reference to a parent lexical environment.