javaScript closure Nedir?

Kapak(closure), JavaScript'te önemli kavramlardan biridir. Kapaklar(closure), JavaScript programcılarının daha iyi kod yazmasını sağlar. Elbette, kapaklar karmaşık ve kapsamınızın ötesinde görünebilir, ancak bu makaleyi okuduktan sonra, kapaklar çok daha kolay anlaşılacak ve kafanızdaki sorular gitmiş olacak.

JavaScript'de kapaklar sayesinde genel, özel ve ayrıcalıklı üyeler mümkündür . Bunun anlamı, bir dış fonksiyonun, iç fonksiyon döndükten(return) sonra bile, dış fonksiyonunun değişkenlerine ve parametrelerine her zaman erişebilmesidir.

JavaScript Kapaklar

JavaScript değişkenleri yerel veya küresel kapsamda olabilir.

Global değişkenler kapaklar(closure) ile yerel (özel) yapılabilir.

Global Variables

Bir fonksiyon, fonksiyonda tanımlanan tüm değişkenlere erişebilir.

function test() {
  var a = 4;

  return a * a;
}

console.log(test()); //4

Ancak bir fonksiyon, fonksiyon dışında tanımlanan değişkenlere de erişebilir:

var a = 4;

function test() {

  return a * a;
}
console.log(test()); //16

Son örnekte, "a" Global bir değişkendir. Bir web sayfasında, genel değişkenler, window nesnesine aittir. Genel değişkenler, sayfadaki (penceredeki) tüm komut dosyaları tarafından kullanılabilir (ve değiştirilebilir). İlk örnekte, "a" yerel bir değişkendir. Yerel değişken yalnızca tanımlandığı fonksiyonun içinde kullanılabilir. Diğer fonksiyonlardan ve diğer kodlama kodlarından gizlenir. Aynı isme sahip global ve yerel değişkenler farklı değişkenlerdir. Birini değiştirmek, diğerini değiştirmez.

Variable Lifetime (Değişkenlerin ömrü)

Genel değişkenler, uygulamanız (pencereniz / web sayfanız) yaşadığı sürece yaşar.

JavaScript'te, bir fonksiyonun çalışması tamamlandığında, kendi bünyesinde bildirilen herhangi bir değişken "çöp toplanır". Başka bir deyişle, bellekten silinir.

A Counter Dilemma (Karşı ikilem)

Bir şeyi saymak için bir değişken kullanmak istediğinizi ve bu sayacın tüm fonksiyonlarda kullanılabilir olmasını istediğinizi varsayalım. Sayacı artırmak için global bir değişken ve bir function kullanabilirsiniz:

// sayacı başlat
var counter = 0;

// sayacı artıran fonksiyon
function add() {
  counter += 1;
}

// Add() fonksiyonu 3 kez çağırın
add();
add();
add();

// Sayaç şimdi 3 olmalı
	

Yukarıdaki çözümle ilgili bir sorun var: Sayfadaki herhangi bir kod, add() fonksiyonu çağırmadan sayacı değiştirebilir.

Sayacı, diğer kodun değiştirmesini önlemek için add() fonksiyonunda yerel olmalıdır:

// sayacı başlat
var counter = 0;

// sayacı artıran fonksiyon
function add() {
  var counter = 0; 
  counter += 1;
}

// Add() fonksiyonu 3 kez çağırın
add();
add();
add();

// Sayaç şimdi 3 olmalıdır fakat 0(sıfır)

İşe yaramadı, çünkü yerel sayaç yerine küresel sayacı gösteriyoruz.

Genel sayacı kaldırabilir ve fonksiyonun döndürmesini(return) sağlayarak yerel sayaca erişebiliriz:

// sayacı artıran fonksiyon
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}

// Add() fonksiyonu 3 kez çağırın
add();
add();
add();

// Sayaç şimdi 3 olmalıdır. Ancak 1'dir.

İşe yaramadı, çünkü foksiyon her çağırdığımızda yerel sayacı sıfırladık.

Bir JavaScript iç fonksiyonu bunu çözebilir.

javaScript iç içe Fonksiyonlar

Tüm fonksiyonların global kapsamı vardır.

Aslında, JavaScript’te, tüm fonksiyonlar üstlerindeki kapsama erişebilir.

JavaScript iç içe geçmiş fonksiyonları destekler. İç içe geçmiş fonksiyonlar yukarıdaki kapsamlara erişebilir

Aşağıdaki örnekte, iç fonksiyon plus(), üst fonksiyondaki sayaç değişkenine erişime sahiptir:

function add() {

  var counter = 0;

  function plus() {counter += 1;}

  plus(); 

  return counter; 
}

console.log(add()); //1

Plus() fonksiyonuna dışarıdan ulaşırsak bu, karşı ikilemi çözebilirdi.

Ayrıca counter = 0 komutunu yalnızca bir kez çalıştırmanın bir yolunu bulmamız gerekir.

Bir kapağa(closure) ihtiyacımız var.

JavaScript Closures

var add = (function () {

  var counter = 0;

  return function () {counter += 1; return counter}

})();

add();
add();
add();

// sayaç şimdi 3

Örneği Açıklarsak

add değişkenine kendini çağıran bir fonksiyona return değeri atanır.

Kendi kendine çağırma fonksiyonu yalnızca bir kez çalışır. Sayacı sıfıra (0) ayarlar ve bir fonksiyon ifadesi döndürür(return).

Bu yolla ekleme bir fonksiyon haline gelir. "Harika" kısım, üst kapsamdaki sayaca erişebilmesidir.

Buna JavaScript kapağı(closure) denir. Bir fonksiyon "özel" değişkenlere sahip olmasını mümkün kılar .

Sayaç, isimsiz fonksiyonun kapsamı tarafından korunur ve yalnızca add() fonksiyonu kullanılarak değiştirilebilir.

Biraz daha ilginç bir örnek -ekle fonksiyonu:

function ekle(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = ekle(5);
var add10 = ekle(10);

console.log(add5(2));  // 7

console.log(add10(2)); // 12

Bu örnekte, x adındaki tek bir argüman alan ve yeni bir fonksiyon döndüren ekle(x) fonksiyonu tanımladık. return (Döndürdüğü) fonksiyon, y'nin tek bir argümanını alır ve x ve y'nin toplamını return eder.

Özünde, ekle bir fonksiyon fabrikasıdır - bağımsız değişkenlerine belirli bir değer katabilecek fonksiyonlar oluşturur. Yukarıdaki örnekte, fonksiyon fabrikamızı iki yeni fonksiyon oluşturmak için kullanıyoruz - birine argüman 5, diğeri 10 ekliyor.

add5 ve add10 her ikisi de ekle(5) - ekle(10) x değerleri closure özelliğinde değişkenlerdir. closure(kapaklar) şöyle ifade etsek yanlış olmazlar İçteki fonksiyonların değişkenleri kullanabilmesi için açılan Kapaklardır. Aynı fonksiyon body tanımında paylaşırlar, ancak farklı kapsam ortamlarında depolanırlar. Add5'in kapsam ortamında x=5 iken, add10'un kapsam ortamında x=10'dur. Tekrar add5 fonksiyonu değer girersek console.log(add5(2)); buda içteki fonksiyonun "y" değeridir.