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.

Var anahtar sözcüğü olmadan oluşturulan değişkenler, bir fonksiyonun içinde oluşturulsalar bile her zaman globaldir.

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.

Kapak()closure, Ana fonksiyon kapatıldıktan sonra bile ana kapsam erişimine sahip bir fonksiyondur. Unutmayın fonksiyonlar çalıştırıldıktan sonra değişkenler hafızadan silinirler closure yapılarında hala değişkenler hatırlanır.

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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1579

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.