JavaScript Kapanışları Nedir ve Bunları Nasıl Yazıyorsunuz?

JavaScript, ustalaşması en zor programlama dillerinden biridir. Bazen kıdemli geliştiriciler bile yazdıkları kodun çıktısını tahmin edemezler. JavaScript'teki daha kafa karıştırıcı kavramlardan biri de kapanışlardır. Yeni başlayanlar genellikle konsepte takılırlar - endişelenmeyin. Bu makale, kapanışları daha iyi anlamanıza yardımcı olmak için sizi yavaş yavaş temel örneklere yönlendirecektir. Başlayalım.

Kapanışlar Nedir?

Kapatma, bir işlevin yapısı ve kapanış oluşturma sırasında işlevin kapsamındaki tüm değişkenler dahil olmak üzere sözcüksel ortamıdır. Daha basit bir ifadeyle, bir dış işlev ve bir iç işlev düşünün. İç işlev, dış işlevin kapsamına erişebilir.

Bazı JavaScript kapatma örneklerine bakmadan önce, sözcüksel kapsam belirlemeyi anlamanız gerekir.

Sözcüksel Çevre Nedir?

Sözcüksel ortam, ana ortamıyla birlikte yerel bellektir. Aşağıda verilen örneğe göz atın ve aşağıdaki kodun çıktısını tahmin edin:

işlev dış(){ 
 a = 10 olsun;
 konsol.log (y);
 iç();
 fonksiyon iç(){
 konsol.log(a);
 konsol.log (y);
 }
}
y = 9 olsun;
dış();

çıktı olacak 9, 10, 9. İç fonksiyon, ebeveyninin değişkenlerine erişime sahiptir, dış() işlev. Bu nedenle, iç() işlev erişebilir değişken bir. bu iç() işlevi de erişebilir değişken y kavramından dolayı kapsam zinciri.

Dış fonksiyonun ebeveyni globaldir ve fonksiyonun ebeveyni iç() işlev dış() işlev. Bu nedenle, iç() işlev, ebeveynlerinin değişkenlerine erişebilir. Değişkene erişmeye çalışırsanız a global kapsamda, bir hata görüntüler. Bu nedenle, diyebilirsiniz ki, iç() işlev sözcüksel olarak içindedir dış() işlev ve sözcük ebeveyni dış() fonksiyon küreseldir.

JavaScript Kapanış Örneklerinin Açıklaması

Sözcük ortamını öğrendiğinize göre, aşağıdaki kodun çıktısını kolayca tahmin edebilirsiniz:

fonksiyon a(){
 x = 10 olsun;
 fonksiyon b(){
 konsol.log (x);
 }
 B();
}
a();

çıktı 10. İlk bakışta tahmin edemeyebilirsiniz, ancak bu JavaScript'te bir kapatma örneğidir. Kapanışlar bir işlevden ve onların sözcüksel ortamından başka bir şey değildir.

İç içe geçmiş üç işlevin olduğu bir örneği ele alalım:

fonksiyon a(){ 
 x = 10 olsun;
 fonksiyon b(){ 
 fonksiyon c(){
 işlev d(){
 konsol.log (x);
 }
 D();
 }
 C();
 }
 B();
}
a();

Yine de kapatma olarak adlandırılacak mı? Cevap Evet. Yine, bir kapatma, sözcüksel ebeveyni ile bir işlevdir. Fonksiyonun sözcüksel ebeveyni D() dır-dir C(), ve kapsam zinciri kavramı nedeniyle, işlev D() dış fonksiyonların ve global olanların tüm değişkenlerine erişime sahiptir.

Başka bir ilginç örneğe göz atın:

işlev x(){
 a = 9 olsun;
 dönüş işlevi y(){
 konsol.log(a); 
 }
}
b = x();

Bir fonksiyonun içinde bir fonksiyon döndürebilir, bir değişkene bir fonksiyon atayabilir ve bir fonksiyonun içine bir fonksiyon iletebilirsiniz. JavaScript'te işlev. Bu dilin güzelliğidir. Değişken yazdırırsanız çıktının ne olacağını tahmin edebilir misiniz? B? İşlev yazdıracak y(). İşlev x() bir işlev döndürür y(). Bu nedenle, değişken B bir işlevi saklar. Şimdi, değişkeni çağırırsanız ne olacağını tahmin edebilir misiniz? B? Değişkenin değerini yazdırır a: 9.

Kapanışları kullanarak veri gizlemeyi de gerçekleştirebilirsiniz. Daha iyi anlamak için, tarayıcıda "button" adlı bir kimliği olan bir düğme örneğini düşünün. Buna bir click olay dinleyicisi ekleyelim.

Şimdi düğmenin kaç kez tıklandığını hesaplamanız gerekiyor. Bunu yapmanın iki yolu vardır.

1. Global bir değişken sayısı oluşturun ve tıklamayla artırın. Ama bu yöntemin bir kusuru var. Global değişkenlerde kolayca erişilebilir oldukları için değişiklik yapmak kolaydır.

   Beni tıkla
   
   

2. Kapanışları kullanarak veri gizlemeyi başarabiliriz. tamamını sarabilirsiniz addEventListener() fonksiyon içinde fonksiyon. Kapanış yapar. Ve bir kapatma oluşturduktan sonra, bir sayma değişkeni ve tıklandığında değerini artırın. Bu yöntemi kullanarak, değişken işlevsel kapsamve herhangi bir değişiklik yapılamaz.

   Beni tıkla
   
   

İlişkili: Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

Kapanışlar Neden Önemlidir?

Kapanışlar sadece JavaScript söz konusu olduğunda değil, diğer programlama dillerinde de çok önemlidir. Diğer durumların yanı sıra özel kapsamlarında değişkenler oluşturabileceğiniz veya işlevleri birleştirebileceğiniz birçok senaryoda kullanışlıdırlar.

Bu işlev bileşimi örneğini düşünün:

const çarpma = (a, b) => a*b;
const multipleBy2 = x => çarpma (10, x);
konsol.log (multiplyBy2(9));

Aynı örneği kapanışları kullanarak da uygulayabiliriz:

const çarpma = fonksiyon (a){
 dönüş işlevi (b){
 geri a*b
 }
}
const multipleBy2 = çarpma (2);
konsol.log (multiplyBy2(10))

İşlevler, aşağıdaki senaryolarda kapatmaları kullanabilir:

1. Körleme işlevini uygulamak için
2. Veri gizleme için kullanılacak
3. Olay Dinleyicileri ile kullanılmak üzere
4. setTimeout yönteminde kullanılmak üzere()

Kapanışları Gereksiz Şekilde Kullanmamalısınız

Uygulamanızın performansını düşürebileceğinden, gerçekten gerekmedikçe kapanmalardan kaçınmanız önerilir. Kapatmayı kullanmak çok fazla belleğe mal olacak ve kapaklar düzgün bir şekilde işlenmezse, aşağıdakilere yol açabilir: bellek sızıntıları.

Kapatılan değişkenler, JavaScript'in çöp toplayıcısı tarafından serbest bırakılmaz. Kapakların içinde değişkenler kullandığınızda, tarayıcı değişkenlerin hala kullanımda olduğunu hissettiğinden, bellek çöp toplayıcı tarafından serbest bırakılmaz. Bu nedenle, bu değişkenler bellek tüketir ve uygulamanın performansını düşürür.

Kapanışların içindeki değişkenlerin nasıl çöp toplanmayacağını gösteren bir örnek.

 fonksiyon f(){
 sabit x = 3;
 dönüş işlevi iç(){
 konsol.log (x);
 }
 }
 F()();

bu değişken x burada sık kullanılmasa bile bellek tüketir. Çöp toplayıcı, kapağın içinde olduğu için bu belleği boşaltamaz.

JavaScript Sonsuzdur

Tipik olarak deneyimli geliştiricilerin kendileri tarafından keşfedilmeyen pek çok kavram ve çerçeve olduğundan, JavaScript'te uzmanlaşmak sonsuz bir iştir. Temel bilgileri öğrenerek ve bunları sık sık uygulayarak JavaScript'teki hakimiyetinizi önemli ölçüde geliştirebilirsiniz. Yineleyiciler ve oluşturucular, JavaScript röportajları sırasında röportajların sorduğu kavramlardan bazılarıdır.

JavaScript'te Yineleyicilere ve Oluşturuculara Giriş

JS'de yineleyici ve oluşturucu yöntemlerini öğrenin.

Sonrakini Oku

Yazar hakkında