JavaScript kapan─▒┼člar─▒ nas─▒l ├žal─▒┼č─▒r?


Al─▒nan cevaba git


JavaScript kapan─▒┼člar─▒n─▒, olu┼čturduklar─▒ kavramlar─▒ (├Ârne─čin fonksiyonlar, de─či┼čkenler ve benzerleri) bilen birisine nas─▒l a├ž─▒klars─▒n─▒z, fakat kapan─▒┼člar─▒ kendileri anlam─▒yor mu?

Vikipedi'de verilen ┼×ema ├Ârne─čini g├Ârd├╝m , ancak ne yaz─▒k ki yard─▒mc─▒ olmad─▒.


7645









Cevap say─▒s─▒n─▒ say: 30






Yeni ba┼člayanlar i├žin JavaScript kapan─▒┼člar─▒

Morris taraf─▒ndan Tue, 2006-02-21 10:19 tarihinde sunulmu┼čtur. Topluluktan bu yana d├╝zenlendi.

Kapaklar sihir de─čil

Bu sayfa, ├žal─▒┼čan JavaScript kodunu kullanarak bir programc─▒n─▒n onlar─▒ anlayabilmesi i├žin kapan─▒┼člar─▒ a├ž─▒klar. Guru ve fonksiyonel programc─▒lar i├žin de─čil.

Kapaklar zor de─čil ├žekirdek kavram─▒ grokked kez anlamak i├žin. Ancak, teorik veya akademik y├Ânelimli a├ž─▒klamalar─▒ okuyarak anlamak imkans─▒zd─▒r!

Bu makale, ana dilde baz─▒ programlama deneyimi olan ve a┼ča─č─▒daki JavaScript fonksiyonunu okuyabilen programc─▒lar i├žin haz─▒rlanm─▒┼čt─▒r:

 function sayHello(name) {
  var text = 'Hello ' + name;
  var say = function() { console.log(text); }
  say();
}
sayHello('Joe'); 

─░ki k─▒sa ├Âzet

  • Bir i┼člev (zaman foo ) di─čer i┼člevleri (bar ve baz) bildirir, olu┼čturulan yerel de─či┼čkenlerin aile foo oldu─ču yok olmaz iken fonksiyon ├ž─▒kar. De─či┼čkenler sadece d─▒┼č d├╝nyaya g├Âr├╝nmez hale gelir. foo Bu nedenle, i┼člevleri ┼ča┼č─▒rt─▒c─▒ bir ┼čekilde geri d├Ând├╝rebilir bar ve ileride tekrar baz arayacak birileri bile de─čil, kimsenin araya giremedi─či bu kapal─▒ de─či┼čken ailesi ("kapanma") arac─▒l─▒─č─▒yla birbirleriyle okumaya, yazmaya ve birbirleriyle ileti┼čim kurmaya devam edebilirler. foo .

  • Bir kapatma birinci s─▒n─▒f fonksiyonlar─▒ desteklemenin bir yoludur ; de─či┼čkenleri kapsam─▒ i├žinde referans g├Âsterebilen (ilk kez bildirildi─činde), bir de─či┼čkene atanabilen, bir fonksiyona arg├╝man olarak ge├žirilebilen veya bir fonksiyon sonucu olarak d├Ând├╝r├╝lebilen bir ifadedir.

Bir kapatma ├Ârne─či

A┼ča─č─▒daki kod bir i┼čleve ba┼čvuru verir:

 function sayHello2(name) {
  var text = 'Hello ' + name; // Local variable
  var say = function() { console.log(text); }
  return say;
}
var say2 = sayHello2('Bob');
say2(); // logs "Hello Bob" 

├ço─ču JavaScript programc─▒s─▒, bir i┼člev referans─▒n─▒n say2 yukar─▒daki koddaki bir de─či┼čkene ( ) nas─▒l d├Ând├╝r├╝ld├╝─č├╝n├╝ anlayacakt─▒r . E─čer yapmazsan, kapatmay─▒ ├Â─črenmeden ├Ânce buna bakmal─▒s─▒n. C kullanan bir programc─▒, i┼člevi bir i┼čleve bir i┼čaret├ži d├Ând├╝rmek olarak d├╝┼č├╝n├╝r ve de─či┼čkenlerin say ve say2 her birinin bir i┼čleve i┼čaret├ži oldu─čunu d├╝┼č├╝n├╝r .

Bir C i┼čaret├žisi bir i┼čleve bir i┼čleve bir JavaScript ba┼čvurusu aras─▒nda kritik bir fark var. JavaScript, bir i┼člev i┼čaret├žisi hem sahip olarak bir i┼člev referans de─či┼čkenin d├╝┼č├╝nebiliriz yan─▒ s─▒ra bir kapat─▒lmas─▒na bir gizli i┼čaret├ži.

Yukar─▒daki kodun bir kapan─▒┼č─▒ vard─▒r, ├ž├╝nk├╝ bu ├Ârnekte anonim i┼člev ba┼čka bir i┼člev i├žinde function() { console.log(text); } bildirilmi┼čtir . JavaScriptÔÇÖte, anahtar kelimeyi ba┼čka bir fonksiyonun i├žinde kullan─▒yorsan─▒z, bir kapak olu┼čturuyorsunuz. sayHello2() function

C ve di─čer bir├žok ortak dilde, bir fonksiyonun geri d├Ânmesinden sonra , t├╝m yerel de─či┼čkenlere eri┼čilemez, ├ž├╝nk├╝ y─▒─č─▒n ├žer├ževesi yok edilir.

JavaScript'te, ba┼čka bir i┼člev i├žinde bir i┼člev bildirirseniz, d─▒┼č i┼člevin yerel de─či┼čkenleri, geri d├Ând├╝kten sonra eri┼čilebilir kalabilir. Bu yukar─▒da g├Âsterilmi┼čtir, ├ž├╝nk├╝ fonksiyonu say2() geri d├Ând├╝kten sonra ├ža─č─▒r─▒yoruz sayHello2() . ├ça─črd─▒─č─▒m─▒z kodun , i┼člevin yerel bir de─či┼čkeni text olan de─či┼čkene ba┼čvurdu─čuna dikkat edin . sayHello2()

 function() { console.log(text); } // Output of say2.toString();
 

├ç─▒kt─▒s─▒na bakt─▒─č─▒m─▒zda say2.toString() , kodun de─či┼čkeni ifade etti─čini g├Ârebiliriz text . Yerel de─či┼čkenler gizlice bir kapatmada canl─▒ tutuldu─čundan , anonim i┼člev text de─čere sahip olabilir . 'Hello Bob' sayHello2()

Dehas─▒, JavaScript'te bir i┼člev referans─▒n─▒n ayn─▒ zamanda olu┼čturuldu─ču kapanmaya ili┼čkin gizli bir referansa sahip olmas─▒d─▒r - delegelerin bir y├Ântem i┼čaret├žisi ve bir nesneye y├Ânelik gizli bir referans oldu─ču gibi.

Daha fazla ├Ârnek

Bir nedenden ├Ât├╝r├╝, onlar hakk─▒nda okudu─čunuzda kapan─▒┼člar─▒n anla┼č─▒lmas─▒ ger├žekten zor g├Âr├╝n├╝yor, ancak baz─▒ ├Ârnekler g├Ârd├╝─č├╝n├╝zde, nas─▒l ├žal─▒┼čt─▒klar─▒ belli oluyor (biraz zaman ald─▒). Nas─▒l ├žal─▒┼čt─▒klar─▒n─▒ anlayana kadar ├Ârnekler ├╝zerinde dikkatli bir ┼čekilde ├žal─▒┼čman─▒z─▒ ├Âneririm. Nas─▒l ├žal─▒┼čt─▒klar─▒n─▒ tam olarak anlamadan kapaklar─▒ kullanmaya ba┼člarsan─▒z, yak─▒nda ├žok garip hatalar yarat─▒rs─▒n─▒z!

├ľrnek 3

Bu ├Ârnek, yerel de─či┼čkenlerin kopyalanmad─▒─č─▒n─▒ g├Âsterir - referans olarak tutulur. D─▒┼č fonksiyon ├ž─▒kt─▒ktan sonra bile y─▒─č─▒n-├žer├ževe bellekte canl─▒ kal─▒r!

 function say667() {
  // Local variable that ends up within closure
  var num = 42;
  var say = function() { console.log(num); }
  num++;
  return say;
}
var sayNumber = say667();
sayNumber(); // logs 43 

├ľrnek 4

├ť├ž k├╝resel fonksiyonun da ayn─▒ kapatma i├žin ortak bir referans─▒ vard─▒r, ├ž├╝nk├╝ hepsi tek bir ├ža─čr─▒ i├žinde bildirilir setupSomeGlobals() .

 var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
  // Local variable that ends up within closure
  var num = 42;
  // Store some references to functions as global variables
  gLogNumber = function() { console.log(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }
}

setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 43
gSetNumber(5);
gLogNumber(); // 5

var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); // 42

oldLog() // 5 

├ť├ž i┼člev ayn─▒ kapanmaya eri┼čimi payla┼čt─▒ - setupSomeGlobals() ├╝├ž i┼člev tan─▒mland─▒─č─▒nda yerel de─či┼čkenler .

Yukar─▒daki ├Ârnekte, setupSomeGlobals() tekrar ararsan─▒z , yeni bir kapatma (y─▒─č─▒n ├žer├ževesi!) Olu┼čturuldu─čunu unutmay─▒n. Eski gLogNumber , gIncreaseNumber , gSetNumber de─či┼čkenler ile ├╝zerine yaz─▒l─▒r yeni yeni kapanmas─▒n─▒ sahip fonksiyonlar. (Ba┼čka bir i┼člev i├žinde bir i┼člev bildirmek her In JavaScript, i├ž fonksiyonu (ler) / yeniden yeniden yarat─▒l─▒r olan her d─▒┼č i┼člev denir zaman.)

├ľrnek 5

Bu ├Ârnek, kapatman─▒n, ├ž─▒kmadan ├Ânce d─▒┼č i┼člev i├žinde bildirilen herhangi bir yerel de─či┼čken i├žerdi─čini g├Âsterir. De─či┼čkenin alice ger├žekte ads─▒z i┼člevden sonra bildirildi─čine dikkat edin. Ads─▒z i┼člev ilk ├Ânce bildirilir ve bu i┼člev ├ža─čr─▒ld─▒─č─▒nda alice de─či┼čkene eri┼čebilir ├ž├╝nk├╝ alice ayn─▒ kapsamdad─▒r (JavaScript de─či┼čkenleri kald─▒rmaktad─▒r ). Ayr─▒ca sayAlice()() sadece do─črudan d├Ând├╝r├╝len i┼člev referans─▒n─▒ ├ža─č─▒r─▒r sayAlice() - daha ├Ânce yap─▒lanlarla ayn─▒d─▒r ancak ge├žici de─či┼čken olmadan ayn─▒d─▒r.

 function sayAlice() {
    var say = function() { console.log(alice); }
    // Local variable that ends up within closure
    var alice = 'Hello Alice';
    return say;
}
sayAlice()();// logs "Hello Alice" 

Zor: say de─či┼čkenin kapa─č─▒n i├žinde oldu─čunu ve i├žinde a├ž─▒klanabilecek herhangi bir ba┼čka i┼člev taraf─▒ndan eri┼čilebildi─čini sayAlice() veya i├ž i┼člev i├žinde tekrar tekrar eri┼čilebilece─čini not edin.

├ľrnek 6

Bu, bir├žok insan i├žin ger├žek bir sonu├žtur, o y├╝zden anlaman gerekiyor. Bir d├Âng├╝ i├žinde bir i┼člev tan─▒ml─▒yorsan─▒z ├žok dikkatli olun: kapan─▒┼čtaki yerel de─či┼čkenler ilk d├╝┼č├╝nd├╝─č├╝n├╝z gibi davranmayabilir.

Bu ├Ârne─či anlamak i├žin Javascript'teki "de─či┼čken kald─▒rma" ├Âzelli─čini anlaman─▒z gerekir.

 function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(item + ' ' + list[i])} );
    }
    return result;
}

function testList() {
    var fnlist = buildList([1,2,3]);
    // Using j only to help prevent confusion -- could use i.
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

 testList() //logs "item2 undefined" 3 times 

Sat─▒r result.push( function() {console.log(item + ' ' + list[i])} , sonu├ž dizisine ├╝├ž kez ads─▒z bir i┼čleve bir ba┼čvuru ekler. Anonim i┼člevlere bu kadar a┼čina de─čilseniz, onun gibi d├╝┼č├╝n├╝n:

 pointer = function() {console.log(item + ' ' + list[i])};
result.push(pointer);
 

├ľrne─či ├žal─▒┼čt─▒rd─▒─č─▒n─▒zda, "item2 undefined" ├╝├ž kez kaydedildi─čini unutmay─▒n! Sadece ├Ânceki ├Ârneklerde oldu─ču gibi, yerel de─či┼čkenler i├žin tek kapatma var olmas─▒d─▒r buildList (vard─▒r result , i , list ve item ). ─░simsiz fonksiyonlar hatta ├ža─čr─▒ld─▒─č─▒nda fnlist[j]() ; hepsi kullan─▒m─▒ ayn─▒ tek kapama ve bunlar i├žin ge├žerli de─čeri kullanmak i ve item (bu bir kapa─č─▒n i├žinde i bir de─čere sahiptir 3 d├Âng├╝ tamamland─▒ ├ž├╝nk├╝ ve item bir de─čeri bir sahiptir 'item2' ). 0 dan indeksledi─čimize dikkat edin, bu nedenle item de─čeri vard─▒r item2 . Ve i ++ i de─čeri art─▒racakt─▒r 3 .

De─či┼čkene ili┼čkin blok d├╝zeyinde bir bildirim item kullan─▒ld─▒─č─▒nda ( let anahtar kelime arac─▒l─▒─č─▒yla), anahtar kelimeyle i┼člev kapsam─▒ndaki bir de─či┼čken bildirimi kullan─▒ld─▒─č─▒nda ne olaca─č─▒n─▒ g├Ârmek yararl─▒ olabilir var . Bu de─či┼čiklik yap─▒l─▒rsa, dizideki her ads─▒z i┼člev result kendi kapanmas─▒na sahiptir; ├ľrnek ├žal─▒┼čt─▒r─▒ld─▒─č─▒nda, ├ž─▒kt─▒ a┼ča─č─▒daki gibidir:

 item0 undefined
item1 undefined
item2 undefined
 

De─či┼čken yerine i kullan─▒larak da tan─▒mlanm─▒┼čsa , ├ž─▒kt─▒ ┼č├Âyledir: let var

 item0 1
item1 2
item2 3
 

├ľrnek 7

Bu son ├Ârnekte, ana fonksiyona yap─▒lan her ├ža─čr─▒ ayr─▒ bir kapanma yarat─▒r.

 function newClosure(someNum, someRef) {
    // Local variables that end up within closure
    var num = someNum;
    var anArray = [1,2,3];
    var ref = someRef;
    return function(x) {
        num += x;
        anArray.push(num);
        console.log('num: ' + num +
            '; anArray: ' + anArray.toString() +
            '; ref.someVar: ' + ref.someVar + ';');
      }
}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); // num: 5; anArray: 1,2,3,5; ref.someVar: 4;
fn2(1); // num: 6; anArray: 1,2,3,6; ref.someVar: 4;
obj.someVar++;
fn1(2); // num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;
fn2(2); // num: 8; anArray: 1,2,3,6,8; ref.someVar: 5; 

├Âzet

Her ┼čey tamamen belirsiz g├Âr├╝n├╝yorsa, yap─▒lacak en iyi ┼čey ├Ârneklerle oynamakt─▒r. Bir a├ž─▒klama okumak, ├Ârnekleri anlamaktan daha zordur. Kapamalar ve istifleme ├žer├ževeleri vb. A├ž─▒klamalar─▒m teknik olarak do─čru de─čil - anlamaya yard─▒mc─▒ olmas─▒ ama├žlanan br├╝t basitle┼čtirmeler. Temel fikir toparland─▒ktan sonra, detaylar─▒ daha sonra alabilirsiniz.

Son puan:

  • function Ba┼čka bir fonksiyonun i├žinde ne zaman kullan─▒rsan─▒z , bir kapak kullan─▒l─▒r.
  • eval() Bir fonksiyonun i├žinde ne zaman kullan─▒rsan─▒z , bir kapak kullan─▒l─▒r. eval ─░┼člevin yerel de─či┼čkenlerine ba┼čvuruda bulunabilece─činiz metin , i├žindekiler eval kullanarak bile yeni yerel de─či┼čkenler olu┼čturabilirsiniz. eval('var foo = ÔÇŽ')
  • Bir i┼člev i├žinde new Function(ÔÇŽ) ( ─░┼člev yap─▒c─▒ ) kulland─▒─č─▒n─▒zda , bir kapatma olu┼čturmaz. (Yeni fonksiyon, d─▒┼č fonksiyonun yerel de─či┼čkenlerine referans veremez.)
  • JavaScriptÔÇÖte kapanma, t├╝m yerel de─či┼čkenlerin bir kopyas─▒n─▒n t─▒pk─▒ bir i┼člev ├ž─▒karken oldu─ču gibi saklanmas─▒ gibidir.
  • Kapanman─▒n her zaman sadece bir i┼čleve bir girdi olu┼čturuldu─čunu ve yerel de─či┼čkenlerin bu kapa─ča eklendi─čini d├╝┼č├╝nmek en iyisidir.
  • Kapan─▒┼čl─▒ bir i┼člev her ├ža─čr─▒ld─▒─č─▒nda yeni bir yerel de─či┼čkenler k├╝mesi tutulur (i┼člevin i├žinde bir i┼člev bildirimi bulundu─čundan ve bu i├ž i┼člev i├žin bir ba┼čvuru ya geri g├Ânderilirse ya da bunun i├žin bir d─▒┼č ba┼čvuru tutulursa) ).
  • ─░ki i┼člev ayn─▒ kaynak metne sahip gibi g├Âz├╝kebilir, ancak 'gizli' kapat─▒lmalar─▒ nedeniyle tamamen farkl─▒ davran─▒┼člara sahip olabilir. JavaScript kodunun asl─▒nda bir i┼člev referans─▒n─▒n kapan─▒p kapanmad─▒─č─▒n─▒ ├Â─črenebilece─čini sanm─▒yorum.
  • Herhangi bir dinamik kaynak kodu de─či┼čikli─či (├Ârne─čin:) yapmaya ├žal─▒┼č─▒yorsan─▒z myFunction = Function(myFunction.toString().replace(/Hello/,'Hola')); , e─čer myFunction bir kapatma ise i┼če yaramaz (elbette, ├žal─▒┼čma zaman─▒nda kaynak kod dizesi de─či┼čimi yapmay─▒ asla d├╝┼č├╝nmezsiniz, ama ...).
  • ─░┼člev bildirimleri i├žinde i┼člev bildirimleri i├žinde i┼člevler i├žinde almak m├╝mk├╝nd├╝rÔÇŽ ve birden fazla d├╝zeyde kapan─▒┼člar alabilirsiniz.
  • Normalde kapatma, hem yakalanan de─či┼čkenlerle hem de i┼člev i├žin bir terimdir. Bu makalede bu tan─▒m─▒ kullanmad─▒─č─▒m─▒ unutmay─▒n!
  • JavaScript'teki kapatman─▒n normalde i┼člevsel dillerde bulunanlardan farkl─▒ oldu─čundan ┼č├╝pheleniyorum.

Ba─člant─▒lar

Te┼čekk├╝rler

E─čer varsa sadece (burada ya da ba┼čka yerde!) Kapan─▒┼člar─▒ ├Â─črenilen, o zaman bu makale daha net yapabilir ├Ânerebiliriz herhangi bir de─či┼čiklik hakk─▒nda sizden herhangi bir geri bildirim ilgilenen ediyorum. Morrisjohns.com (morris_closure @) adresine e-posta g├Ânderin. L├╝tfen JavaScriptÔÇÖte ne de kapan─▒┼člarda guru olmad─▒─č─▒m─▒ unutmay─▒n.


Morris'in orjinal yay─▒n─▒ ─░nternet Ar┼čivinde bulunabilir .


7030







Function anahtar s├Âzc├╝─č├╝n├╝ ba┼čka bir i┼člev i├žinde g├Ârd├╝─č├╝n├╝zde, i├ž i┼člev d─▒┼č i┼člevdeki de─či┼čkenlere eri┼čebilir.

 function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2); 

Bunun nedeni her zaman, 16 g├╝nl├╝─če kaydeder bar eri┼čebilirsiniz x bir arg├╝man olarak tan─▒mland─▒ hangi foo ve eri┼čimi de can tmp dan foo .

Yani olan bir kapatma. Bir i┼člevin kapatma olarak adland─▒r─▒lmas─▒ i├žin geri gelmesi gerekmez. Sadece de─či┼čken kapsam─▒n─▒z d─▒┼č─▒ndaki de─či┼čkenlere eri┼čmek bir kapanma yarat─▒r .

 function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // will also log 16
  }
}

var bar = foo(2); // bar is now a closure.
bar(10); 

├ç├╝nk├╝ yukar─▒daki fonksiyon ayn─▒ zamanda, 16 g├╝nl├╝─če kaydeder bar hala ba┼čvurabilirsiniz x ve tmp bunun kapsam─▒ i├žine art─▒k do─črudan olsa bile.

Bununla birlikte, tmp hala i├žeride bar kapat─▒lmaya devam etti─či i├žin, artmaktad─▒r. Her arad─▒─č─▒n─▒zda art─▒r─▒lacakt─▒r bar .

Kapanman─▒n en basit ├Ârne─či ┼čudur:

 var a = 10;

function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test(); 

Bir JavaScript i┼člevi ├ža─čr─▒ld─▒─č─▒nda, yeni bir y├╝r├╝tme i├žeri─či olu┼čturulur. ─░┼člev arg├╝manlar─▒ ve ana nesne ile birlikte, bu y├╝r├╝tme ba─člam─▒ ayr─▒ca kendi d─▒┼č─▒nda bildirilen t├╝m de─či┼čkenleri de al─▒r (yukar─▒daki ├Ârnekte hem 'a' hem de 'b').

Bir listesini d├Ând├╝rerek veya bunlar─▒ global de─či┼čkenlere ayarlayarak birden fazla kapatma fonksiyonu olu┼čturmak m├╝mk├╝nd├╝r. Bunlar─▒n hepsi ayn─▒ x ve ayn─▒ tmp ┼čeyleri ifade edecek, kendi kopyalar─▒n─▒ yapm─▒yorlar.

Burada say─▒ x de─či┼čmez bir say─▒d─▒r. JavaScript di─čer de─či┼čmezleri ile oldu─ču gibi, ne zaman foo ├ža─čr─▒l─▒r, say─▒ x oldu─ču kopyalanan i├žine foo onun arg├╝man olarak x .

├ľte yandan, JavaScript nesnelerle u─čra┼č─▒rken daima referanslar─▒ kullan─▒r. S├Âylerseniz, foo bir nesneyle arad─▒n─▒z, d├Ând├╝rd├╝─č├╝ kapatma o orijinal nesneye referans verecektir !

 function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + tmp);
    x.memb = x.memb ? x.memb + 1 : 1;
    console.log(x.memb);
  }
}

var age = new Number(2);
var bar = foo(age); // bar is now a closure referencing age.
bar(10); 

Beklenildi─či gibi, yap─▒lan her ├ža─čr─▒ bar(10) artacakt─▒r x.memb . Beklenmeyebilecek olan ┼čey, x bunun basit├že age de─či┼čkenle ayn─▒ nesneye g├Ânderme yapmas─▒d─▒r! ├ça─čr─▒ bir ├žift sonra bar , age.memb 2 olacak! Bu referans, HTML nesnelerle yap─▒lan bellek s─▒z─▒nt─▒s─▒ i├žin temel olu┼čturur.


3935







├ľNS├ľZ: Bu cevap, soru oldu─čunda yaz─▒lm─▒┼čt─▒r:

Eski AlbertÔÇÖin dedi─či gibi: ÔÇťBunu alt─▒ ya┼č─▒ndaki bir ├žocu─ča a├ž─▒klayamazsan─▒z, ger├žekten kendiniz anlam─▒yorsunuz.ÔÇŁ. JSÔÇÖyi 27 ya┼č─▒ndaki bir arkada┼č─▒n─▒za kapatmay─▒ a├ž─▒klamaya ├žal─▒┼čt─▒m ve tamamen ba┼čar─▒s─▒z oldum.

6 ya┼č─▒nda oldu─čumu ve garip bir ┼čekilde bu konuyla ilgilendi─čimi d├╝┼č├╝nen var m─▒?

─░lk soruyu kelimenin tam anlam─▒yla almaya ├žal─▒┼čan tek insanlardan biri oldu─čuma eminim. O zamandan beri, soru birka├ž kez mutasyona u─črad─▒, bu y├╝zden cevab─▒m ┼čimdi inan─▒lmaz derecede aptalca g├Âr├╝n├╝yor. Umar─▒m hikayenin genel fikri baz─▒lar─▒ i├žin e─členceli kal─▒r.


Zor kavramlar─▒ a├ž─▒klarken b├╝y├╝k bir analoji ve metafor hayran─▒y─▒m, bu y├╝zden elimi bir hikaye ile deneyeyim.

Bir Zamanlar:

Bir prenses vard─▒ ...

 function princess() {
 

Maceralarla dolu harika bir d├╝nyada ya┼čad─▒. Prens B├╝y├╝leyicisiyle tan─▒┼čt─▒, tek boynuzlu at─▒, d├Âv├╝lm├╝┼č ejderhalar, konu┼čan hayvanlar ve di─čer bir├žok fantastik ┼čeyle d├╝nyas─▒nda dola┼č─▒yordu.

     var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

    /* ... */
 

Ama her zaman s─▒k─▒c─▒ ev i┼čleri ve yeti┼čkin d├╝nyas─▒na geri d├Ânmek zorunda kalacakt─▒.

     return {
 

Ve s─▒k s─▒k onlara bir prenses olarak en son inan─▒lmaz ser├╝venini anlat─▒rd─▒.

         story: function() {
            return adventures[adventures.length - 1];
        }
    };
}
 

Ama tek g├Ârecekleri k├╝├ž├╝k bir k─▒z ...

 var littleGirl = princess();
 

... sihir ve fantaziyle ilgili hikayeler anlat─▒yor.

 littleGirl.story();
 

Ve yeti┼čkinler ger├žek prensesleri bilseler bile, tek boynuzlu atlara veya ejderhalara asla inanmazlar ├ž├╝nk├╝ onlar─▒ asla g├Âremezlerdi. Yeti┼čkinler, yaln─▒zca k├╝├ž├╝k k─▒z─▒n hayal g├╝c├╝n├╝n i├žinde var olduklar─▒n─▒ s├Âyledi.

Ancak ger├žek ger├že─či biliyoruz; ─░├žinde prenses olan k├╝├ž├╝k k─▒z ...

... ger├žekten i├žinde k├╝├ž├╝k bir k─▒z─▒n oldu─ču bir prenses.


2381







Soruyu ciddiye alarak, 6 ya┼č─▒ndaki tipik bir ├žocu─čun bili┼čsel olarak neler yapabilece─čini ├Â─črenmeliyiz, ancak ku┼čkusuz, JavaScriptÔÇÖe ilgi duyanlar─▒n bu kadar tipik olmad─▒─č─▒n─▒ belirtmeliyiz.

On ├çocukluk Geli┼čimi: 5 ila 7 Y─▒l diyor:

├çocu─čunuz iki ad─▒ml─▒ talimatlar─▒ izleyebilecek. ├ľrne─čin, ├žocu─čunuza ÔÇťMutfa─ča git ve bana bir ├ž├Âp torbas─▒ getirinÔÇŁ derseniz, bu y├Ân├╝ hat─▒rlayabilecekler.

Bu ├Ârne─či, kapan─▒┼člar─▒ a┼ča─č─▒daki gibi a├ž─▒klamak i├žin kullanabiliriz:

Mutfak ad─▒ verilen yerel bir de─či┼čkene sahip bir kapatmad─▒r trashBags . Mutfa─č─▒n i├žinde getTrashBag bir ├ž├Âp torbas─▒ al─▒p geri veren bir i┼člev var .

Bunu JavaScriptÔÇÖte ┼čunun gibi kodlayabiliriz:

 function makeKitchen() {
  var trashBags = ['A', 'B', 'C']; // only 3 at first

  return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}

var kitchen = makeKitchen();

console.log(kitchen.getTrashBag()); // returns trash bag C
console.log(kitchen.getTrashBag()); // returns trash bag B
console.log(kitchen.getTrashBag()); // returns trash bag A 

Kapaklar─▒n neden ilgin├ž oldu─čunu a├ž─▒klayan di─čer noktalar:

  • Her zaman makeKitchen() ├ža─čr─▒l─▒r, kendi ayr─▒ bir yeni bir kapatma olu┼čturulur trashBags .
  • trashBags De─či┼čken Her mutfakta i├žine yerel ve eri┼čilebilir d─▒┼č─▒nda de─čil, ama ├╝zerinde i├ž fonksiyon getTrashBag ├Âzelli─či bu bilgilere eri┼čimi var.
  • Her i┼člev ├ža─čr─▒s─▒ bir kapatma olu┼čturur, ancak kapa─č─▒n i├ž k─▒sm─▒na eri┼čimi olan bir i├ž i┼člev, kapa─č─▒n d─▒┼č─▒ndan ├ža─čr─▒lmad─▒─č─▒ s├╝rece kapa─č─▒n etraf─▒nda durmaya gerek kalmaz. getTrashBag Fonksiyonu ile nesneyi d├Ând├╝rmek burada burada.

732







Saman Adam

Bir d├╝─čmeye ka├ž kez t─▒kland─▒─č─▒n─▒ bilmem ve her ├╝├ž t─▒klatmada da bir ┼čeyler yapmam gerekir ...

Olduk├ža A├ž─▒k ├ç├Âz├╝m

 // Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
}); 
 <button id="button">Click Me!</button> 

┼×imdi bu i┼če yarayacak, ancak tek amac─▒ say─▒m─▒ takip etmek olan bir de─či┼čken ekleyerek d─▒┼č kapsama alan─▒na giriyor. Baz─▒ durumlarda, d─▒┼č uygulaman─▒z─▒n bu bilgilere eri┼čmesi gerekebilece─činden bu tercih edilebilir. Ancak bu durumda, yaln─▒zca her ├╝├ž t─▒klaman─▒n davran─▒┼č─▒n─▒ de─či┼čtiriyoruz, bu nedenle bu i┼člevi etkinlik i┼čleyicisine dahil etmek tercih edilir .

Bu se├žene─či d├╝┼č├╝n├╝n

 var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})()); 
 <button id="button">Click Me!</button> 

Burada birka├ž ┼čey dikkat edin.

Yukar─▒daki ├Ârnekte, JavaScriptÔÇÖin kapanma davran─▒┼č─▒n─▒ kullan─▒yorum. Bu davran─▒┼č, herhangi bir i┼člevin, olu┼čturuldu─ču kapsama, s├╝resiz olarak eri┼čebilmesini sa─člar. Bunu pratikte uygulamak i├žin hemen ba┼čka bir i┼člevi d├Ând├╝ren bir i┼člevi ├ža─č─▒rd─▒m ve d├Ând├╝rd├╝─č├╝m i┼člev i├ž say─▒ de─či┼čkenine eri┼čebildi─činden (yukar─▒da a├ž─▒klanan kapama davran─▒┼č─▒ nedeniyle) bu sonu├ž taraf─▒ndan kullan─▒lmak ├╝zere ├Âzel bir kapsam sa─člar. i┼člevi ... ├çok basit de─čil mi? Hadi suland─▒ral─▒m ...

Tek sat─▒rl─▒ basit bir kapatma

 //          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();
 

D├Ând├╝r├╝len i┼člev d─▒┼č─▒ndaki t├╝m de─či┼čkenler d├Ând├╝r├╝len i┼člev i├žin kullan─▒labilir, ancak bunlar d├Ând├╝r├╝len i┼člev nesnesine do─črudan kullan─▒lamaz ...

 func();  // Alerts "val"
func.a;  // Undefined
 

Anla? Bu nedenle, birincil ├Ârne─čimizde, say─▒m de─či┼čkeni kapan─▒┼č i├žinde bulunur ve olay i┼čleyicisine her zaman eri┼čilebilir olur, bu nedenle durumu t─▒klat t─▒klatmaya kar┼č─▒ korur.

Ayr─▒ca, bu ├Âzel de─či┼čken durumuna hem okuma hem de ├Âzel kapsam de─či┼čkenlerine atama i├žin tamamen eri┼čilebilir.

─░┼čte gidiyorsunuz; ┼čimdi bu davran─▒┼č─▒ tamamen kaps─▒yorsun.

Tam Blog Yaz─▒s─▒ (jQuery konular─▒ dahil)


571







Kapaklar─▒ a├ž─▒klamak zordur, ├ž├╝nk├╝ herkesin sezgisel olarak ├žal─▒┼čmay─▒ umdu─ču baz─▒ davran─▒┼člar─▒ i┼če almak i├žin kullan─▒l─▒rlar. Ben (o ve yol onlar─▒ a├ž─▒klamak i├žin en iyi yolu bulmak ben onlars─▒z durumu hayal etmek ne yapt─▒klar─▒n─▒ ├Â─črendik) oldu─ču:

     var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3)); 

JavaScript e─čer burada ne olur de─čil mi kapan─▒┼člar─▒n─▒ biliyor? Sadece son sat─▒rdaki ├ža─čr─▒y─▒ kendi y├Ântem g├Âvdesiyle de─či┼čtirin (temelde hangi i┼člevlerin yapt─▒─č─▒d─▒r) ve ┼čunlar─▒ elde edin:

 console.log(x + 3);
 

┼×imdi, tan─▒m─▒ nerede x ? Mevcut kapsamda tan─▒mlamad─▒k. Tek ├ž├Âz├╝m, kapsam─▒n─▒ (veya daha do─črusu ebeveyinin kapsam─▒n─▒) etraf─▒nda plus5 ta┼č─▒mas─▒na izin vermektir . Bu sayede x iyi tan─▒mlanm─▒┼č ve 5 de─čerine ba─članm─▒┼čt─▒r.


485







Tamam, 6 ya┼č─▒nda bir kapan─▒┼č hayran─▒. En basit kapatma ├Ârne─čini duymak ister misiniz?

Bir sonraki durumu hayal edelim: Bir arabada bir s├╝r├╝c├╝ oturuyor. O araba bir u├ža─č─▒n i├žinde. U├žak havaalan─▒nda. S├╝r├╝c├╝n├╝n arabas─▒ d─▒┼č─▒ndaki, ancak u├ža─č─▒n i├žindeki nesnelere, o u├žak havaalan─▒ndan ayr─▒lsa bile, eri┼čebilme yetene─či kapan─▒yor. Bu kadar. 27 ya┼č─▒n─▒ doldurdu─čunuzda, daha ayr─▒nt─▒l─▒ a├ž─▒klamaya veya a┼ča─č─▒daki ├Ârne─če bak─▒n.

─░┼čte u├žak hikayemi koda nas─▒l d├Ân├╝┼čt├╝rebilece─čimi.

 var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy"); 


365







Bu, di─čer cevaplar─▒n baz─▒lar─▒nda ortaya ├ž─▒kan kapanmalarla ilgili (olas─▒) yanl─▒┼č anla┼č─▒lmalar─▒ gidermeye y├Ânelik bir giri┼čimdir.

  • Bir kapama sadece bir i├ž i┼člev d├Ând├╝rd├╝─č├╝n├╝zde yarat─▒lmaz. Asl─▒nda, kapatma i┼člevinin kapat─▒lmas─▒ i├žin hi├žbir ┼čekilde geri d├Ânmesi gerekmez . Bunun yerine, i├ž i┼člevinizi bir d─▒┼č kapsamdaki bir de─či┼čkene atayabilir veya onu hemen veya herhangi bir zaman sonra ├ža─čr─▒labilecek ba┼čka bir i┼čleve arg├╝man olarak iletebilirsiniz. Bu nedenle, ku┼čatma i┼člevinin kapat─▒lmas─▒, ku┼čatma i┼člevinin ├ža─čr─▒ld─▒─č─▒ andan itibaren b├╝y├╝k olas─▒l─▒kla , ku┼čatma i┼člevinin ├ža─čr─▒lmas─▒ndan ├Ânce, herhangi bir i├ž i┼člev bu kapama eri┼čimine sahip oldu─ču i├žin, ku┼čatma i┼člevinin d├Ânmesinden ├Ânce veya sonra i├ž i┼člev ├ža─čr─▒s─▒ yap─▒ld─▒─č─▒ zaman yarat─▒l─▒r .
  • Bir kapatma , kapsam─▒ndaki de─či┼čkenlerin eski de─čerlerinin bir kopyas─▒n─▒ referans almaz . De─či┼čkenlerin kendileri kapatman─▒n bir par├žas─▒d─▒r ve bu de─či┼čkenlerden birine eri┼čilirken g├Âr├╝len de─čer, eri┼čildi─či zamanki en son de─čerdir. Bu, d├Âng├╝lerin i├žinde olu┼čturulan i├žsel fonksiyonlar─▒n zorlu olmas─▒n─▒n nedeni, her birinin, fonksiyonun yarat─▒ld─▒─č─▒ veya ├ža─čr─▒ld─▒─č─▒ s─▒rada de─či┼čkenlerin bir kopyas─▒n─▒ almak yerine ayn─▒ d─▒┼č de─či┼čkenlere eri┼čebilmesidir.
  • Bir kapan─▒┼čtaki "de─či┼čkenler", i┼člev i├žinde bildirilen adland─▒r─▒lm─▒┼č i┼člevleri i├žerir . Ayr─▒ca, fonksiyonun arg├╝manlar─▒n─▒ da i├žerirler. Bir kapama, t├╝m├╝yle k├╝resel kapsama kadar, kapanan de─či┼čkenlerin de─či┼čkenlerine de eri┼čebilir.
  • Kapaklar belle─či kullan─▒r, ancak JavaScript kendili─činden yap─▒lmayan kendi dairesel yap─▒lar─▒n─▒ temizledi─činden bellek s─▒z─▒nt─▒s─▒na neden olmaz. Kapaklarla ilgili Internet Explorer bellek s─▒z─▒nt─▒lar─▒, kapanmalara referans veren DOM ├Âzniteli─či de─čerlerinin ba─člant─▒s─▒n─▒ kesemedi─činde ve dolay─▒s─▒yla olas─▒ dairesel yap─▒lara yap─▒lan referanslar─▒ korudu─čunda olu┼čturulur.

364







Bir kapatma bir nesneye ├žok benzer. Ne zaman bir i┼člev ├ža─č─▒r─▒rsan─▒z ba┼člat─▒l─▒yor.

JavaScript'teki bir kapatman─▒n kapsam─▒ s├Âzl├╝kseldir, bu, kapatman─▒n ait oldu─ču i┼člev i├žinde yer alan her ┼čeyin, i├žinde olan herhangi bir de─či┼čkene eri┼čimi oldu─ču anlam─▒na gelir .

Bir de─či┼čken bulunan kapat─▒lmas─▒ e─čer

  1. var foo=1; veya ile atamak
  2. sadece yaz var foo;

E─čer bir i├ž i┼člev (ba┼čka bir i┼člevin i├žinde yer alan bir i┼člev), b├Âyle bir de─či┼čkene kendi kapsam─▒ i├žinde var ile tan─▒mlamaks─▒z─▒n eri┼čirse, de─či┼čkenin i├žeri─čini d─▒┼č kapakta de─či┼čtirir .

Bir kapatma, onu ba┼člatan i┼člevin ├žal─▒┼čma s├╝resini uzat─▒r. Di─čer fonksiyonlar , tan─▒mland─▒klar─▒ kapatma / kapsamdan ├ž─▒karsa (├Ârne─čin, d├Ân├╝┼č de─čerleri olarak), bunlar kapanmaya referans vermeye devam edecektir .

├ľrnek

 function example(closure) {
  // define somevariable to live in the closure of example
  var somevariable = 'unchanged';

  return {
    change_to: function(value) {
      somevariable = value;
    },
    log: function(value) {
      console.log('somevariable of closure %s is: %s',
        closure, somevariable);
    }
  }
}

closure_one = example('one');
closure_two = example('two');

closure_one.log();
closure_two.log();
closure_one.change_to('some new value');
closure_one.log();
closure_two.log(); 

Çıktı

 somevariable of closure one is: unchanged
somevariable of closure two is: unchanged
somevariable of closure one is: some new value
somevariable of closure two is: unchanged
 

364







Bir s├╝re ├Ânce kapan─▒┼člar─▒ a├ž─▒klayan bir blog yaz─▒s─▒ yazd─▒m. ─░┼čte neden istemedi─činiz konusunda kapan─▒┼člar hakk─▒nda s├Âylediklerim .

Kapan─▒┼člar, bir i┼člevin kal─▒c─▒, ├Âzel de─či┼čkenlere sahip olmas─▒na izin vermenin bir yoludur - yani, yaln─▒zca bir i┼člevin bildi─či de─či┼čkenler, ├žal─▒┼čt─▒r─▒ld─▒─č─▒ ├Ânceki zamanlardan gelen bilgileri nerede izleyebilece─či.

Bu anlamda, bir i┼člevin ├Âzel ├Âzelliklere sahip bir nesne gibi biraz hareket etmesine izin verir.

Tam yay─▒n:

Peki bu kapan─▒┼č ┼čeyleri neler?


236







Kapaklar basit:

A┼ča─č─▒daki basit ├Ârnek, JavaScript kapan─▒┼člar─▒n─▒n t├╝m ana noktalar─▒n─▒ kapsar. *  

─░┼čte eklemek ve ├žarpmak hesap makineleri ├╝reten bir fabrika:

 function make_calculator() {
  var n = 0; // this calculator stores a single number n
  return {
    add: function(a) {
      n += a;
      return n;
    },
    multiply: function(a) {
      n *= a;
      return n;
    }
  };
}

first_calculator = make_calculator();
second_calculator = make_calculator();

first_calculator.add(3); // returns 3
second_calculator.add(400); // returns 400

first_calculator.multiply(11); // returns 33
second_calculator.multiply(10); // returns 4000
 

Anahtar nokta: Her make_calculator bir yeni yerel de─či┼čken yaratma ├ža─čr─▒s─▒ n , bu hesap makinesi taraf─▒ndan kullan─▒lmaya devam edilir add ve multiply iadelerden ├žok sonra ├žal─▒┼č─▒r make_calculator .

Y─▒─č─▒n ├žer├ževelerine a┼čina iseniz, bu hesap makineleri garip g├Âr├╝n├╝yor: D├Ân├╝┼člerden n sonra eri┼čmeye nas─▒l devam edebilirler make_calculator ? Cevap, JavaScriptÔÇÖin ÔÇťy─▒─č─▒n ├žer├ževeleriniÔÇŁ kullanmad─▒─č─▒n─▒, bunun yerine onlar─▒ d├Ând├╝ren i┼člev ├ža─čr─▒s─▒ndan sonra da devam edebilen ÔÇťy─▒─č─▒n ├žer├ževeleriniÔÇŁ kulland─▒─č─▒n─▒ hayal etmektir.

D─▒┼č i┼člevde ** bildirilen eri┼čim de─či┼čkenlerine benzer add ve multiply bunlara dahil olan i├ž i┼člevlere kapatma denir .

Kapanacak tek ┼čey bu kadar.



* ├ľrne─čin, ba┼čka bir cevapta verilen "Aptallar ─░├žin Kapan─▒┼člar" makalesindeki t├╝m noktalar─▒ kapsar ; yaln─▒zca ├Ârnek 6 hari├ž, de─či┼čkenlerin bildirilmeden ├Ânce kullan─▒labilece─čini g├Âsterir, bilmesi g├╝zel, ancak kapatma ile tamamen ilgisizdir. Ayr─▒ca , arg├╝manlar─▒n─▒ yerel de─či┼čkenlere (adland─▒r─▒lm─▒┼č i┼člev arg├╝manlar─▒na) kopyalayan i┼člevler (1) ve (2) say─▒lar─▒ kopyalaman─▒n yeni bir say─▒ olu┼čturdu─ču, ancak bir nesne referans─▒n─▒ kopyalad─▒─č─▒ durumlar haricinde , kabul edilen cevaptaki t├╝m noktalar─▒ kapsar. Ayn─▒ nesneye ba┼čka bir referans verir. Bunlar da bilmek iyidir, fakat yine de tamamen kapanma ile ilgisi yoktur. Ayr─▒ca bu cevaptaki ├Ârne─če ├žok benziyor ancak biraz daha k─▒sa ve daha az soyut. Bu cevab─▒n veya bu yorumun anlam─▒n─▒ kapsamaz , bu JavaScript'in bir d├Âng├╝ de─či┼čkeninin mevcut de─čerini i├ž fonksiyonunuza ba─člaman─▒z─▒ zorla┼čt─▒r─▒r: "Eklenti " ad─▒m─▒ yaln─▒zca ├ževreleyen bir yard─▒mc─▒ fonksiyonla yap─▒labilir. i├ž i┼čleviniz ve her d├Âng├╝ yinelemede ├ža─čr─▒l─▒r. (Kesinlikle konu┼čursak, i├ž i┼člev, bir ┼čey tak─▒l─▒ olmak yerine, yard─▒mc─▒ i┼člevinin de─či┼čkenin kopyas─▒na eri┼čir.) Yine, kapaklar olu┼čtururken ├žok yararl─▒d─▒r, ancak kapaman─▒n ne oldu─ču ya da nas─▒l ├žal─▒┼čt─▒─č─▒n─▒n bir par├žas─▒ de─čildir. De─či┼čkenlerin depolama alan─▒ yerine de─čerlere ba─čl─▒ oldu─ču ML gibi i┼člevsel dillerde farkl─▒ ├žal─▒┼čan kapaklar nedeniyle ek bir kafa kar─▒┼č─▒kl─▒─č─▒ vard─▒r, bu da bir ┼čekilde kapama y├Ântemlerini (yani "takma" ┼čeklinde) anlayan sabit bir insan ak─▒┼č─▒ sa─člar. De─či┼čkenlerin her zaman depolama alan─▒na ve hi├žbir zaman de─čerlere ba─čl─▒ olmad─▒─č─▒ JavaScript i├žin yaln─▒zca yanl─▒┼č.

** Herhangi bir d─▒┼č i┼člev, e─čer i├ž i├že ge├žmi┼čse, ya da hatta k├╝resel ba─člamda, bu cevab─▒n a├ž─▒k├ža i┼čaret etti─či gibi .


215







Bunu alt─▒ ya┼č─▒ndaki bir ├žocu─ča nas─▒l a├ž─▒klar─▒m:

Yeti┼čkinlerin nas─▒l bir eve sahip olabileceklerini biliyorsunuz, ve bunu eve mi ├ža─č─▒r─▒yorlar? Bir annenin ├žocu─ču oldu─čunda, ├žocuk ger├žekten hi├žbir ┼čeye sahip de─čildir, de─čil mi? Fakat ebeveynlerinin bir evi var, bu y├╝zden birisi ├žocu─ča ÔÇťEviniz nerede?ÔÇŁ Diye sordu─čunda, o eve! ÔÇŁDiye cevap verebilir ve ebeveynlerinin evine i┼čaret edebilir. Bir "Kapan─▒┼č", ├žocu─čun her zaman (yurtd─▒┼č─▒nda olsa bile) bir evi oldu─čunu s├Âyleyebilmesidir, ger├žekten evin sahibi olan ebeveyn olsa bile.


204







5 ya┼č─▒ndaki bir ├žocu─ča kapan─▒┼člar─▒n─▒ a├ž─▒klayabilir misiniz? *

Hala GoogleÔÇÖ─▒n a├ž─▒klamas─▒n─▒n ├žok iyi ├žal─▒┼čt─▒─č─▒n─▒ ve ├Âzl├╝ oldu─čunu d├╝┼č├╝n├╝yorum :

 /*
*    When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns.
*
* An important concept to learn in JavaScript.
*/

function outerFunction(someNum) {
    var someString = 'Hey!';
    var content = document.getElementById('content');
    function innerFunction() {
        content.innerHTML = someNum + ': ' + someString;
        content = null; // Internet Explorer memory leak for DOM reference
    }
    innerFunction();
}

outerFunction(1);ÔÇő
 


─░├ž fonksiyonun geri d├Ânmemesine ra─čmen, bu ├Ârne─čin bir kapatma yaratt─▒─č─▒n─▒ ispatlamak

* AC # soru


198







─░Y─░ / K├ľT├ť kar┼č─▒la┼čt─▒rmalar─▒ ile daha iyi ├Â─črenme e─čilimindeyim. ├çal─▒┼čma kodunu izlemekten ho┼član─▒r, ard─▒ndan ├žal─▒┼čmayan bir kodla kar┼č─▒la┼č─▒rs─▒n─▒z. Kar┼č─▒la┼čt─▒rma yapan ve bulabildi─čim en basit a├ž─▒klamadaki farkl─▒l─▒klar─▒ azaltmaya ├žal─▒┼čan bir jsFiddle'─▒ bir araya getirdim .

Do─čru yap─▒lan kapaklar:

 console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}
 
  • Yukar─▒daki kodda createClosure(n) d├Âng├╝n├╝n her yinelemesinde ├ža─čr─▒l─▒r. Not: De─či┼čkeni n , yeni bir i┼člev kapsam─▒nda yarat─▒lan yeni bir de─či┼čken index oldu─čunu ve d─▒┼č kapsama ba─čl─▒ olan de─či┼čkenin olmad─▒─č─▒n─▒ vurgulamak i├žin adland─▒rd─▒m .

  • Bu yeni bir kapsam yarat─▒r ve n bu kapsam ile s─▒n─▒rl─▒d─▒r; bu, her yineleme i├žin bir tane olmak ├╝zere 10 ayr─▒ kapsam─▒m─▒z oldu─ču anlam─▒na gelir.

  • createClosure(n) n'yi bu kapsam dahilinde d├Ând├╝ren bir i┼člev d├Ând├╝r├╝r.

  • Her kapsam dahilinde n her t├╝rl├╝ de─čere ba─čl─▒ oldu─ču o zaman vard─▒ createClosure(n) d├Ând├╝r├╝lmeden i├ž i├že i┼člev daima de─čerini d├Ând├╝r├╝r b├Âylece ba┼člat─▒ld─▒─č─▒ n andaki kadar createClosure(n) ba┼člat─▒ld─▒─č─▒.

Kapaklar yanl─▒┼č yap─▒ld─▒:

 console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}
 
  • Yukar─▒daki kodda, d├Âng├╝ createClosureArray() fonksiyonun i├žinde hareket ettirildi ve fonksiyon ┼čimdi tamamlanm─▒┼č diziyi d├Ând├╝rd├╝, bu ilk bak─▒┼čta daha sezgisel g├Âr├╝n├╝yor.

  • A├ž─▒k├ža belli olmayan ┼čey, createClosureArray() yaln─▒zca bir kez ├ža─čr─▒ld─▒─č─▒ i├žin, bu fonksiyon i├žin her d├Âng├╝ i├žin bir kez yerine sadece bir kapsam olu┼čturulur.

  • Bu fonksiyon i├žerisinde adland─▒r─▒lm─▒┼č bir de─či┼čken index tan─▒mlanm─▒┼čt─▒r. D├Âng├╝ ├žal─▒┼č─▒r ve d├Ânen diziye i┼člevler ekler index . Not index i├žinde tan─▒mlan─▒r createClosureArray sadece hi├ž ├ža─čr─▒lan bir kez al─▒r fonksiyonu.

  • ├ç├╝nk├╝ createClosureArray() fonksiyon i├žerisinde sadece bir kapsam vard─▒, index o kapsamda bir de─čere ba─čl─▒. Ba┼čka bir deyi┼čle, d├Âng├╝ de─čerini index her de─či┼čtirdi─činde, onu o kapsamda ba┼čvuran her ┼čey i├žin de─či┼čtirir.

  • Diziye eklenen t├╝m i┼člevler index , ilk ├Ârnek gibi 10 farkl─▒ kapsamdan 10 farkl─▒ olan─▒n yerine tan─▒mlanm─▒┼č olan ana kapsamdan AYNI de─či┼čkenini d├Ând├╝r├╝r . Sonu├žta, 10 fonksiyonun t├╝m├╝ ayn─▒ de─či┼čkenden ayn─▒ de─či┼čkeni d├Ând├╝r├╝r.

  • D├Âng├╝ bittikten ve index de─či┼čtirildikten sonra, son de─čer 10'du, bu nedenle diziye eklenen her i┼člev index , ┼čimdi 10'a ayarlanan tek de─či┼čkenin de─čerini d├Ând├╝r├╝r .

Sonu├ž

KAPALI YAPILAN SA─×
n = 0
n = 1
n = 2
n = 3
n = 4
n = 5
n = 6
n = 7
n = 8
n = 9

KAPALI YAPILAN YANLI┼×
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10


170







Vikipedi kapan─▒┼člar─▒ :

Bilgisayar bilimlerinde, bir kapatma, o i┼člevin yerel olmayan adlar─▒ (serbest de─či┼čkenler) i├žin referans veren bir ortamla birlikte bir i┼člevdir.

Teknik olarak, i├žinde JavaScript , her i┼člev bir kapakt─▒r . Her zaman ├ževre kapsam─▒nda tan─▒mlanan de─či┼čkenlere eri┼čebilir.

Yana JavaScript kapsam tan─▒mlayan in┼čaat bir fonksiyondur , bir├žok ba┼čka dillerde oldu─ču gibi bir kod blo─ču, genellikle ne demek kapat─▒lmas─▒ JavaScript bir oldu─čunu zaten idam ├ževreleyen fonksiyonu tan─▒mlanan yerel olmayan de─či┼čkenlerle fonksiyon ├žal─▒┼čma .

Kapaklar genellikle baz─▒ gizli ├Âzel verilerle fonksiyonlar olu┼čturmak i├žin kullan─▒l─▒r (ancak her zaman b├Âyle de─čildir).

 var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.
 

ems

Yukar─▒daki ├Ârnek, bir kez ├žal─▒┼čt─▒r─▒lan ads─▒z bir i┼člev kullan─▒yor. Ancak olmak zorunda de─čildir. Her mkdb ├ža─čr─▒ld─▒─č─▒nda bir veritaban─▒ i┼člevi olu┼čturarak adland─▒r─▒labilir (├Ârne─čin ) ve daha sonra ├žal─▒┼čt─▒r─▒labilir. ├ťretilen her i┼člevin kendi gizli veritaban─▒ nesnesi olacakt─▒r. Kapatmalar─▒n bir ba┼čka kullan─▒m ├Ârne─či, bir i┼člevi d├Ând├╝rmedi─čimizde, ancak her biri ayn─▒ verilere eri┼čen farkl─▒ i┼člevler i├žin birden ├žok i┼člev i├žeren bir nesnedir.


164







Kapan─▒┼člar─▒n nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ a├ž─▒klamak i├žin etkile┼čimli bir JavaScript ├Â─čreticisi haz─▒rlad─▒m. Kapan─▒┼č nedir?

─░┼čte ├Ârneklerden biri:

 var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here
 

137







├çocuklar, ebeveynleri gittikten sonra bile ebeveynleriyle payla┼čt─▒─č─▒ s─▒rlar─▒ daima hat─▒rlayacaklar. Bu, fonksiyonlar i├žin kapaklar─▒n ne oldu─čudur.

JavaScript i┼člevlerinin s─▒rlar─▒ ├Âzel de─či┼čkenlerdir.

 var parent = function() {
 var name = "Mary"; // secret
}
 

Her arad─▒─č─▒n─▒zda, yerel de─či┼čken "name" olu┼čturulur ve "Mary" ad─▒ verilir. Ve fonksiyondan her ├ž─▒kt─▒─č─▒nda de─či┼čken kaybedilir ve ad unutulur.

Tahmin edebilece─činiz gibi, de─či┼čkenler i┼člev her ├ža─čr─▒ld─▒─č─▒nda yeniden yarat─▒ld─▒─č─▒ndan ve ba┼čka hi├ž kimse bunlar─▒ bilmeyece─činden, depoland─▒klar─▒ gizli bir yer olmal─▒d─▒r. S─▒rlar Odas─▒ ya da y─▒─č─▒n ya da yerel kapsam olarak adland─▒r─▒labilir , ancak ger├žekten ├Ânemli de─čil. Haf─▒zada sakl─▒ bir yerlerde olduklar─▒n─▒ biliyoruz.

Ancak, JavaScript'te, di─čer i┼člevler i├žinde olu┼čturulan i┼člevlerin, ebeveynlerinin yerel de─či┼čkenlerini de bildi─či ve ya┼čad─▒klar─▒ s├╝rece tutabildikleri ├žok ├Âzel bir ┼čey var.

 var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}
 

Dolay─▒s─▒yla, ebeveyn fonksiyonunda oldu─čumuz s├╝rece, gizli de─či┼čkenleri gizli yerden payla┼čan bir veya daha fazla ├žocuk fonksiyonu yaratabilir.

Ancak ├╝z├╝c├╝ olan, e─čer ├žocuk ebeveyn i┼člevinin ├Âzel bir de─či┼čkeni ise, ebeveyn bitince de ├Âlecek ve s─▒rlar onlarla birlikte ├Âlecektir.

Ya┼čamak i├žin, ├žocuk ├žok ge├ž olmadan gitmek zorunda

 var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 
 

Ve ┼čimdi, Mary ÔÇťart─▒k ko┼čmuyorÔÇŁ olsa bile, onun hat─▒ras─▒ kaybolmaz ve ├žocu─ču, birlikte olduklar─▒ s├╝re boyunca ad─▒n─▒ ve di─čer s─▒rlar─▒n─▒ her zaman hat─▒rlayacakt─▒r.

Yani, ├žocu─ča "Alice" diyorsan, cevap verecek

 child("Alice") => "My name is Alice, child of Mary"
 

S├Âylenecek tek ┼čey bu.


126







Cevaplar─▒n neden bu kadar karma┼č─▒k oldu─čunu anlam─▒yorum.

─░┼čte bir kapan─▒┼č:

 var a = 42;

function b() { return a; }
 

Evet. Muhtemelen bunu g├╝nde bir ├žok kez kullan─▒yorsun.


Kapan─▒┼člar─▒n belirli sorunlar─▒ ele almak i├žin karma┼č─▒k bir tasar─▒m hack├╝ oldu─čuna inanmak i├žin hi├žbir neden yoktur. Hay─▒r, kapaklar sadece fonksiyonun ilan edildi─či noktadan (├žal─▒┼čt─▒r─▒lmayan) perspektifinden daha y├╝ksek bir kapsamdan gelen bir de─či┼čken kullanmakla ilgilidir .

┼×imdi yapman─▒za izin veren ┼čey daha muhte┼čem olabilir, di─čer cevaplara bak─▒n.


102







Dlaliberte taraf─▒ndan ilk noktaya ├Ârnek:

Bir kapama sadece bir i├ž i┼člev d├Ând├╝rd├╝─č├╝n├╝zde yarat─▒lmaz. Asl─▒nda, kapatma i┼člevinin geri d├Ânmesi gerekmez. Bunun yerine, i├ž i┼člevinizi d─▒┼č kapsamdaki bir de─či┼čkene atayabilir veya onu hemen kullan─▒labilece─či ba┼čka bir i┼čleve arg├╝man olarak iletebilirsiniz. Bu nedenle, kapatma fonksiyonunun kapat─▒lmas─▒, muhtemelen herhangi bir i├ž fonksiyonun ├ža─čr─▒ld─▒─č─▒ anda eri┼čebildi─či i├žin, kapatma fonksiyonunun ├ža─čr─▒ld─▒─č─▒ zaman zaten mevcuttur.

 var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);
 

92







Bir kapatma, bir i├ž fonksiyonun d─▒┼č fonksiyonundaki de─či┼čkenlere eri┼čime sahip oldu─ču durumdur. Bu muhtemelen kapan─▒┼č i├žin alabilece─činiz en basit tek sat─▒rl─▒ a├ž─▒klamad─▒r.


88







Zaten ├žok say─▒da ├ž├Âz├╝m oldu─čunu biliyorum, ancak bu k├╝├ž├╝k ve basit komut dosyas─▒n─▒n kavram─▒ g├Âstermek i├žin faydal─▒ olabilece─čini d├╝┼č├╝n├╝yorum:

 // makeSequencer will return a "sequencer" function
var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined
 

86







Uyudun ve Dan'i davet ettin. Dan'e bir XBox denetleyicisi getirmesini s├Âyle.

Dan, Paul'├╝ davet ediyor. Dan, Paul'den bir denetleyici getirmesini istiyor. Partiye ka├ž tane kontrol├Âr getirildi?

 function sleepOver(howManyControllersToBring) {

    var numberOfDansControllers = howManyControllersToBring;

    return function danInvitedPaul(numberOfPaulsControllers) {
        var totalControllers = numberOfDansControllers + numberOfPaulsControllers;
        return totalControllers;
    }
}

var howManyControllersToBring = 1;

var inviteDan = sleepOver(howManyControllersToBring);

// The only reason Paul was invited is because Dan was invited. 
// So we set Paul's invitation = Dan's invitation.

var danInvitedPaul = inviteDan(howManyControllersToBring);

alert("There were " + danInvitedPaul + " controllers brought to the party.");
 

82







JavaScript i┼člevleri ┼čunlara eri┼čebilir:

  1. Arg├╝manlar
  2. Yereller (yani, yerel de─či┼čkenleri ve yerel i┼člevleri)
  3. ─░├žeren ├ževre:
    • DOM dahil olmak ├╝zere globals
    • d─▒┼č fonksiyonlardaki herhangi bir ┼čey

Bir fonksiyon ortam─▒na eri┼čiyorsa, fonksiyon bir kapatmad─▒r.

D─▒┼č i┼člevlerin gerekli olmad─▒─č─▒n─▒ unutmay─▒n, ancak faydalar sunsalar da burada tart─▒┼čm─▒yorum. Ortam─▒ndaki verilere eri┼čerek, bir kapatma bu verileri canl─▒ tutar. D─▒┼č / i├ž i┼člevlerin alt harfinde, bir d─▒┼č i┼člev yerel veriler olu┼čturabilir ve sonunda ├ž─▒kabilir ve yine de, d─▒┼č i┼člev ├ž─▒kt─▒ktan sonra herhangi bir i├ž i┼člev kal─▒rsa, i├ž i┼člev d─▒┼č i┼člevin yerel verilerini koruyabilir canl─▒.

K├╝resel ortam─▒ kullanan bir kapatma ├Ârne─či:

Y─▒─č─▒n Ta┼čmas─▒ Oylama ve Oylama A┼ča─č─▒ d├╝─čmesi olaylar─▒n─▒n, global olarak tan─▒mlanm─▒┼č d─▒┼č de─či┼čkenlere eri┼čimi olan kapan─▒┼č, voteUp_click ve voteDown_click olarak ger├žekle┼čtirildi─čini hayal edin. (Sadelik u─čruna, Cevap Oy d├╝─čmeleri dizisi dizisine de─čil, StackOverflow'un Soru Oy d├╝─čmelerine at─▒fta bulunuyorum.)

Kullan─▒c─▒ Oylama d├╝─čmesini t─▒klatt─▒─č─▒nda voteUp_click i┼člevi, oy oyu mu yoksa yaln─▒zca a┼ča─č─▒ oyu mu iptal etmek i├žin isVotedDown == true olup olmad─▒─č─▒n─▒ kontrol eder. VoteUp_click, ├ževreye eri┼čti─či i├žin kapanma i┼člevidir.

 var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}
 

Bu fonksiyonlar─▒n d├Ârd├╝ de hepsi ├ževrelerine eri┼čti─či i├žin kapanma i┼člevidir.


78







Kapan─▒┼člar─▒n yazar─▒, kapamalar─▒ olduk├ža iyi a├ž─▒klad─▒, onlara neden ihtiya├ž duydu─čumuzun nedenini a├ž─▒klad─▒ ve ayr─▒ca kapamalar─▒n anla┼č─▒lmas─▒ i├žin gerekli olan LexicalEnvironment'─▒ a├ž─▒klad─▒.
─░┼čte ├Âzeti:

Bir de─či┼čkene eri┼čilirse, ancak yerel de─čilse ne olur? Buras─▒ gibi:


Resim tan─▒m─▒n─▒ buraya girin

Bu durumda, yorumlay─▒c─▒ de─či┼čkeni d─▒┼č LexicalEnvironment nesnede bulur .

─░┼člem iki ad─▒mdan olu┼čur:

  1. ─░lk ├Ânce, bir f fonksiyonu yarat─▒ld─▒─č─▒nda, bo┼č alanda yarat─▒lmaz. Ge├žerli bir LexicalEnvironment nesnesi var. Yukar─▒daki durumda, penceredir (a, fonksiyon olu┼čturma s─▒ras─▒nda tan─▒ms─▒zd─▒r).


Resim tan─▒m─▒n─▒ buraya girin

Bir i┼člev olu┼čturuldu─čunda, ge├žerli LexicalEnvironment'─▒ referans alan [[Scope]] adl─▒ gizli bir ├Âzellik al─▒r.


Resim tan─▒m─▒n─▒ buraya girin

Bir de─či┼čken okunur, ancak hi├žbir yerde bulunamazsa, bir hata ├╝retilir.

─░├ž i├že i┼člevler

─░┼člevler birbirlerinin i├žine yerle┼čtirilebilir ve ayr─▒ca bir kapsam zinciri olarak da adland─▒r─▒labilecek bir LexicalEn ortamlar─▒ zinciri olu┼čturur.


Resim tan─▒m─▒n─▒ buraya girin

B├Âylece, g fonksiyonu g, a ve f'ye eri┼čebilir.

Kapaklar

D─▒┼č i┼člev bittikten sonra i├ž i├že ge├žmi┼č bir i┼člev ├žal─▒┼čmaya devam edebilir:


Resim tan─▒m─▒n─▒ buraya girin

LexicalEnvironments'─▒ i┼čaretleyin:


Resim tan─▒m─▒n─▒ buraya girin

G├Ârd├╝─č├╝m├╝z gibi this.say , kullan─▒c─▒ nesnesindeki bir ├Âzelliktir, bu nedenle Kullan─▒c─▒ tamamland─▒ktan sonra ya┼čamaya devam eder.

Ve hat─▒rlarsan─▒z, ne zaman this.say olu┼čturuldu─čunu (her fonksiyonda oldu─ču gibi) this.say.[[Scope]] mevcut LexicalEnvironment i├žin dahili bir referans al─▒r . Bu nedenle, mevcut Kullan─▒c─▒ y├╝r├╝tmesinin LexicalEnvironment'─▒ bellekte kal─▒r. Kullan─▒c─▒n─▒n t├╝m de─či┼čkenleri ayn─▒ zamanda m├╝lkleridir, dolay─▒s─▒yla genellikle oldu─ču gibi ├Ânemsiz de─čil, ayn─▒ zamanda dikkatli bir ┼čekilde tutulurlar.

B├╝t├╝n mesele, e─čer i├ž fonksiyonun gelecekte bir d─▒┼č de─či┼čkene eri┼čmek istiyorsa, bunu yapabilmesini sa─člamakt─▒r.

├ľzetlemek:

  1. ─░├ž i┼člev d─▒┼č LexicalEnvironment i├žin bir referans tutar.
  2. ─░├ž i┼člev, d─▒┼č i┼člev bitmi┼č olsa bile, istedi─či zaman de─či┼čkenlere eri┼čebilir.
  3. Taray─▒c─▒, LexicalEnvironment ve t├╝m ├Âzelliklerini (de─či┼čkenleri) referans veren bir i├ž i┼člev bulunana kadar bellekte tutar.

Buna kapatma denir.


75







6 ya┼č─▒nda bir ├žocu─čun babas─▒ olarak, ┼ču anda k├╝├ž├╝k ├žocuklara ├Â─čretmenlik yap─▒yor (ve ├Ârg├╝n bir e─čitim almamay─▒ gerektiren bir acemilik, bu y├╝zden d├╝zeltmeler gerekli olacak), dersin uygulamal─▒ oyun yoluyla en iyi ┼čekilde yap─▒┼čaca─č─▒n─▒ d├╝┼č├╝n├╝yorum. 6 ya┼č─▒ndaki bir kapanman─▒n ne oldu─čunu anlamaya haz─▒rsa, o zaman kendileri gitmek i├žin yeterince ya┼čl─▒lar. Kodu jsfiddle.net'e yap─▒┼čt─▒rman─▒z─▒, biraz a├ž─▒klaman─▒z─▒ ve benzersiz bir ┼čark─▒ s├Âyleyebilmek i├žin onlar─▒ rahat b─▒rakman─▒z─▒ ├Âneririm. A┼ča─č─▒daki a├ž─▒klay─▒c─▒ metin muhtemelen 10 ya┼č─▒nda bir ├žocuk i├žin daha uygundur.

 function sing(person) {

    var firstPart = "There was " + person + " who swallowed ";

    var fly = function() {
        var creature = "a fly";
        var result = "Perhaps she'll die";
        alert(firstPart + creature + "\n" + result);
    };

    var spider = function() {
        var creature = "a spider";
        var result = "that wiggled and jiggled and tickled inside her";
        alert(firstPart + creature + "\n" + result);
    };

    var bird = function() {
        var creature = "a bird";
        var result = "How absurd!";
        alert(firstPart + creature + "\n" + result);
    };

    var cat = function() {
        var creature = "a cat";
        var result = "Imagine That!";
        alert(firstPart + creature + "\n" + result);
    };

    fly();
    spider();
    bird();
    cat();
}

var person="an old lady";

sing(person);
 

TAL─░MATLAR

VER─░LER: Veriler bir ger├žekler toplulu─čudur. Say─▒lar, kelimeler, ├Âl├ž├╝mler, g├Âzlemler veya hatta ┼čeylerin sadece a├ž─▒klamalar─▒ olabilir. Dokunamaz, koklayamaz veya tad─▒na bakamazs─▒n─▒z. Yazabilir, konu┼čabilir ve duyabilirsiniz. Bir bilgisayar─▒ kullanarak dokunma kokusu ve tad─▒ olu┼čturmak i├žin kullanabilirsiniz . Kod kullanan bir bilgisayar taraf─▒ndan faydal─▒ olabilir.

KOD: Yukar─▒daki t├╝m yaz─▒lara kod denir . JavaScript ile yaz─▒lm─▒┼čt─▒r.

JAVASCRIPT: JavaScript bir dildir. ─░ngilizce ya da Frans─▒zca ya da ├çince gibi dillerdir. Bilgisayarlar ve di─čer elektronik i┼člemciler taraf─▒ndan anla┼č─▒lan bir├žok dil var. JavaScript'in bir bilgisayar taraf─▒ndan anla┼č─▒lmas─▒ i├žin bir terc├╝mana ihtiyac─▒ vard─▒r. Sadece Rus├ža bilen bir ├Â─čretmenin okuldaki s─▒n─▒f─▒n─▒z─▒ ├Â─čretmeye geldi─čini hayal edin. ├ľ─čretmen "đ▓ĐüđÁ Đüđ░đ┤ĐĆĐéĐüĐĆ" dedi─činde, s─▒n─▒f anlamazd─▒. Ama neyse ki, s─▒n─▒f─▒n─▒zda herkese bunun "herkesin oturmas─▒" anlam─▒na geldi─čini s├Âyleyen bir Rus ├Â─črenciniz var - yani hepiniz vars─▒n─▒z. S─▒n─▒f bir bilgisayar gibidir ve Rus ├Â─črenci terc├╝mand─▒r. JavaScript i├žin en yayg─▒n terc├╝mana bir taray─▒c─▒ denir.

BROWSER: Bir web sitesini ziyaret etmek i├žin bir bilgisayara, tablete veya telefondan ─░nternete ba─čland─▒─č─▒n─▒zda, bir taray─▒c─▒ kullan─▒rs─▒n─▒z. Bilebilece─činiz ├Ârnekler Internet Explorer, Chrome, Firefox ve Safari'dir. Taray─▒c─▒ JavaScript'i anlayabilir ve bilgisayara ne yapmas─▒ gerekti─čini s├Âyleyebilir. JavaScript talimatlar─▒na fonksiyon denir.

FONKS─░YON: JavaScript'teki bir fonksiyon fabrika gibidir. ─░├žinde sadece bir makine bulunan k├╝├ž├╝k bir fabrika olabilir. Veya her biri farkl─▒ i┼člerde ├žal─▒┼čan bir├žok makineye sahip ba┼čka bir├žok k├╝├ž├╝k fabrika i├žerebilir. Ger├žek hayattaki bir k─▒yafet fabrikas─▒nda, kuma┼č par├žalar─▒n─▒ ve iplik bobinlerini ve ti┼č├Ârtleri ve kot pantolonlar─▒n─▒ ├ž─▒kartabilirsiniz. JavaScript fabrikam─▒z yaln─▒zca verileri i┼čler, dikemez, bir delik a├žamaz veya metal eritebilir. JavaScript fabrikam─▒zda veriler giriyor ve veriler ├ž─▒k─▒yor.

T├╝m bu veri ┼čeyler biraz s─▒k─▒c─▒ geliyor, ama ger├žekten ├žok g├╝zel; bir robota ak┼čam yeme─činde ne yapmam─▒z gerekti─čini s├Âyleyen bir i┼čleve sahip olabiliriz. Diyelim ki sizi ve arkada┼č─▒n─▒z─▒ evime davet ediyorum. Tavuk budu en ├žok seversin, sosisleri severim, arkada┼č─▒n hep istedi─čini ister ve arkada┼č─▒m et yemez.

Al─▒┼čveri┼če ├ž─▒kmaya vaktim olmad─▒─č─▒ndan, fonksiyonun karar almak i├žin buzdolab─▒nda ne oldu─čunu bilmemiz gerekiyor. Her bir malzemenin farkl─▒ bir pi┼čirme s├╝resi vard─▒r ve her ┼čeyin ayn─▒ anda robot taraf─▒ndan s─▒cak servis edilmesini istiyoruz. Fonksiyona ne istedi─čimizi g├Âsteren veriler sa─člamal─▒y─▒z, fonksiyon buzdolab─▒nda 'konu┼čabilir' ve fonksiyon robotu kontrol edebilir.

Bir fonksiyonun normalde bir ismi, parantezleri ve parantezleri vard─▒r. Bunun gibi:

 function cookMeal() {  /*  STUFF INSIDE THE FUNCTION  */  }
 

Bunu not edin /*...*/ ve // kodun taray─▒c─▒ taraf─▒ndan okunmas─▒n─▒ durdurun.

ADI: ─░stedi─čin kelime hakk─▒nda istedi─čin gibi bir i┼člevi ├ža─č─▒rabilirsin. "CookMeal" ├Ârne─či, iki kelimeyi bir araya getirme ve ikincisine ba┼člang─▒├žta b├╝y├╝k harf verme konusunda tipiktir - ancak bu gerekli de─čildir. ─░├žinde bo┼čluk olamaz ve kendi ba┼č─▒na bir say─▒ olamaz.

PARENTEZLER: "Parantezler" veya () JavaScript i┼člevi fabrikas─▒n─▒n kap─▒s─▒ndaki harf kutusu veya sokakta bir bilgi kutusu fabrikaya g├Ândermek i├žin kullan─▒lan posta kutusudur. Bazen posta kutusu ├Ârne─čin i┼čaretlenebilir cookMeal(you, me, yourFriend, myFriend, fridge, dinnerTime) , bu durumda hangi verileri vermeniz gerekti─čini bilirsiniz.

BRACES: Buna benzeyen "Braces" {} fabrikam─▒z─▒n renkli camlar─▒d─▒r. Fabrikan─▒n i├žinden g├Ârebilirsiniz, fakat d─▒┼čar─▒dan g├Âremezsiniz.

YUKARIDAK─░ UZUN KOD ├ľRNE─×─░

Kodumuz kelime fonksiyonuyla ba┼člar , yani bir oldu─čunu biliyoruz! Sonra fonksiyonun ad─▒ ┼čark─▒ s├Âyler - bu fonksiyonun ne hakk─▒nda oldu─čuna dair kendi tarifimdir. Sonra parantez () . Parantezler bir i┼člev i├žin her zaman oradad─▒r. Bazen bo┼č, bazen de bir ┼čey var Bu seferki bir kelime var.: (person) . Bundan sonra b├Âyle bir ayra├ž var { . Bu, sing () i┼člevinin ba┼člang─▒c─▒n─▒ i┼čaretler . Bu bir orta─č─▒ var olan i┼čaretler sonu be─čenerek () b├Âyle }

 function sing(person) {  /* STUFF INSIDE THE FUNCTION */  }
 

Bu y├╝zden bu i┼člevin ┼čark─▒ ile ilgisi olabilir ve bir insan hakk─▒nda baz─▒ bilgilere ihtiya├ž duyabilir. ─░├žinde bu verilerle bir ┼čeyler yapmak i├žin talimatlar var.

┼×imdi, sing () i┼člevinden sonra , kodun sonuna yak─▒n sat─▒r

 var person="an old lady";
 

DE─×─░┼×KEN: Harfler var "de─či┼čken" anlam─▒na gelir. Bir de─či┼čken zarf gibidir. D─▒┼č k─▒s─▒mda bu zarf "ki┼či" olarak i┼čaretlenmi┼čtir. ─░├žeride fonksiyonumuzun ihtiya├ž duydu─ču bilgiyi i├žeren bir ka─č─▒t par├žas─▒, baz─▒ harfler ve bo┼čluklar "ya┼čl─▒ bir bayan" okuyarak bir c├╝mle olu┼čturan bir ip (bir ip olarak adland─▒r─▒l─▒r) gibi bir araya geldi. Zarf─▒m─▒z say─▒lar (tamsay─▒lar denir), talimatlar (i┼člevler denir), listeler ( diziler denir) gibi ba┼čka ┼čeyler i├žerebilir . Bu de─či┼čken t├╝m parantezlerin d─▒┼č─▒na yaz─▒ld─▒─č─▒ndan ve parantezlerin {} i├žindeyken renkli pencerelerden g├Ârebildi─činiz i├žin, bu de─či┼čken kodun herhangi bir yerinden g├Âr├╝lebilir. Buna 'k├╝resel de─či┼čken' diyoruz.

K├ťRESEL DE─×─░┼×KEN: ki┼či k├╝resel bir de─či┼čkendir, yani "ya┼čl─▒ bir bayan" dan "gen├ž bir erke─če" de─čerini de─či┼čtirirseniz, bu ki┼či tekrar de─či┼čtirmeye karar verinceye kadar gen├ž bir adam olmaya devam eder. Kod gen├ž bir adam oldu─čunu g├Ârebiliyor. F12Bir taray─▒c─▒n─▒n geli┼čtirici konsolunu a├žmak i├žin d├╝─čmeye bas─▒n veya Se├ženekler ayarlar─▒na bak─▒n ve bu de─čerin ne oldu─čunu g├Ârmek i├žin "ki┼či" yaz─▒n. T├╝r person="a young man" o de─či┼čti─čini g├Ârmek i├žin tekrar "ki┼či" olarak de─či┼čtirin ve sonra yaz─▒n.

Bundan sonra hatt─▒m─▒z var

 sing(person);
 

Bu sat─▒r i┼člevi ├ža─č─▒r─▒yor, sanki bir k├Âpek ├ža─č─▒r─▒yormu┼č gibi

"Hadi ┼čark─▒ s├Âyle , gel ve ki┼čiyi al !"

Taray─▒c─▒ JavaScript kodunu bu sat─▒ra ula┼čt─▒─č─▒nda, i┼člevi ba┼člat─▒r. Taray─▒c─▒n─▒n ├žal─▒┼čt─▒rmak i├žin ihtiya├ž duydu─ču t├╝m bilgilere sahip oldu─čundan emin olmak i├žin sat─▒r─▒ sonuna koydum.

─░┼člevler eylemleri tan─▒mlar - ana i┼člev ┼čark─▒ s├Âylemeye ili┼čkindir. ┼×ark─▒n─▒n her bir ayeti i├žin ge├žerli ki┼či hakk─▒nda ┼čark─▒ s├Âyleme i├žin ge├žerli olan firstPart adl─▒ bir de─či┼čken i├žerir : "Yutulan" + ki┼či vard─▒ ". E─čer yazarsan─▒z firstPart konsoluna de─či┼čken bir fonksiyonu kilitli oldu─ču i├žin, cevap almazs─▒n─▒z - Taray─▒c─▒ parantez koyu renk camlar─▒nda i├žine g├Âremez.

CLOSURES: Kapaklar, b├╝y├╝k sing () fonksiyonunun i├žindeki k├╝├ž├╝k fonksiyonlard─▒r. B├╝y├╝k fabrikan─▒n i├žindeki k├╝├ž├╝k fabrikalar. Her birinin kendi di┼č telleri vard─▒r, bu da i├žlerindeki de─či┼čkenlerin d─▒┼čar─▒dan g├Âr├╝lemeyece─či anlam─▒na gelir. Bu y├╝zden de─či┼čkenlerin adlar─▒ ( yarat─▒k ve sonu├ž ) kapan─▒┼člarda ancak farkl─▒ de─čerlerle tekrar edilebilir. Bu de─či┼čken adlar─▒n─▒ konsol penceresine yazarsan─▒z, de─čerini iki kat renkli pencere taraf─▒ndan gizlendi─činden bu de─čeri alamazs─▒n─▒z.

Kapan─▒┼člar─▒n t├╝m├╝, sing () i┼člevinin firstPart adl─▒ de─či┼čkeninin ne oldu─čunu bilir , ├ž├╝nk├╝ renkli pencerelerden g├Ârebilirler.

Kapan─▒┼člardan sonra hatlar geliyor

 fly();
spider();
bird();
cat();
 

Sing () i┼člevi, bu i┼člevlerin her birini verilen s─▒rayla ├ža─č─▒r─▒r. Daha sonra sing () fonksiyonunun ├žal─▒┼čmas─▒ yap─▒l─▒r.


59







Tamam, 6 ya┼č─▒nda bir ├žocukla konu┼čurken muhtemelen ┼ču dernekleri kullan─▒rd─▒m.

Hayal edin - t├╝m evde k├╝├ž├╝k karde┼člerinizle birlikte oynuyorsunuz ve oyuncaklar─▒n─▒zla birlikte hareket ediyor ve baz─▒lar─▒n─▒ abinin odas─▒na getirdiniz. Bir s├╝re sonra a─čabeyiniz okuldan d├Ând├╝ ve odas─▒na gitti ve i├žine kilitlendi, b├Âylece art─▒k orada b─▒rak─▒lan oyuncaklara do─črudan bir ┼čekilde eri┼čemiyordunuz. Ama kap─▒y─▒ ├žalabilir ve karde┼činden o oyuncaklar─▒ isteyebilirsin. Buna toy'nin kapanmas─▒ denir ; Karde┼čin senin i├žin yapt─▒ ve ┼čimdi d─▒┼č kapsamda .

Bir kap─▒n─▒n f─▒├ž─▒ taraf─▒ndan kilitlendi─či ve i├žeride kimse bulunmad─▒─č─▒ (genel i┼člev y├╝r├╝tme) ve ard─▒ndan baz─▒ yerel yang─▒nlar─▒n meydana gelip oday─▒ yakmas─▒yla (├ž├Âp toplay─▒c─▒: D), sonra yeni bir oda in┼ča edildi ve ┼čimdi ayr─▒labilirsiniz. orada ba┼čka bir oyuncak (yeni fonksiyon ├Ârne─či), ancak asla ilk oda ├Ârne─činde b─▒rak─▒lan ayn─▒ oyuncaklar─▒ almazlar.

─░leri bir ├žocuk i├žin a┼ča─č─▒dakine benzer bir ┼čey koyard─▒m. M├╝kemmel de─čil, ama ne oldu─čuna dair hissettiriyor:

 function playingInBrothersRoom (withToys) {
  // We closure toys which we played in the brother's room. When he come back and lock the door
  // your brother is supposed to be into the outer [[scope]] object now. Thanks god you could communicate with him.
  var closureToys = withToys || [],
      returnToy, countIt, toy; // Just another closure helpers, for brother's inner use.

  var brotherGivesToyBack = function (toy) {
    // New request. There is not yet closureToys on brother's hand yet. Give him a time.
    returnToy = null;
    if (toy && closureToys.length > 0) { // If we ask for a specific toy, the brother is going to search for it.

      for ( countIt = closureToys.length; countIt; countIt--) {
        if (closureToys[countIt - 1] == toy) {
          returnToy = 'Take your ' + closureToys.splice(countIt - 1, 1) + ', little boy!';
          break;
        }
      }
      returnToy = returnToy || 'Hey, I could not find any ' + toy + ' here. Look for it in another room.';
    }
    else if (closureToys.length > 0) { // Otherwise, just give back everything he has in the room.
      returnToy = 'Behold! ' + closureToys.join(', ') + '.';
      closureToys = [];
    }
    else {
      returnToy = 'Hey, lil shrimp, I gave you everything!';
    }
    console.log(returnToy);
  }
  return brotherGivesToyBack;
}
// You are playing in the house, including the brother's room.
var toys = ['teddybear', 'car', 'jumpingrope'],
    askBrotherForClosuredToy = playingInBrothersRoom(toys);

// The door is locked, and the brother came from the school. You could not cheat and take it out directly.
console.log(askBrotherForClosuredToy.closureToys); // Undefined

// But you could ask your brother politely, to give it back.
askBrotherForClosuredToy('teddybear'); // Hooray, here it is, teddybear
askBrotherForClosuredToy('ball'); // The brother would not be able to find it.
askBrotherForClosuredToy(); // The brother gives you all the rest
askBrotherForClosuredToy(); // Nothing left in there
 

G├Ârd├╝─č├╝n├╝z gibi, odada b─▒rak─▒lan oyuncaklara, karde┼čler arac─▒l─▒─č─▒yla hala eri┼čilebilir durumdalar ve oda kilitli olsa bile. ─░┼čte onunla oynamak i├žin bir jsbin .


56







Alt─▒ ya┼č─▒ndaki bir ├žocu─čun cevab─▒ (bir fonksiyonun ne oldu─čunu ve bir de─či┼čkenin ne oldu─čunu ve hangi verilerin oldu─čunu varsayarsak):

─░┼člevler veri d├Ând├╝rebilir. Bir i┼člevden d├Ând├╝rebilece─činiz bir t├╝r veri ba┼čka bir i┼člevdir. Bu yeni i┼člev d├Ând├╝r├╝ld├╝─č├╝nde, onu olu┼čturan fonksiyonda kullan─▒lan t├╝m de─či┼čkenler ve arg├╝manlar kaybolmaz. Bunun yerine, bu ├╝st i┼člev "kapan─▒r". Ba┼čka bir deyi┼čle, i├žine hi├žbir ┼čey bakamaz ve d├Ând├╝rd├╝─č├╝ i┼člev d─▒┼č─▒nda kulland─▒─č─▒ de─či┼čkenleri g├Ârebilir. Bu yeni i┼člevin, onu yaratan i┼člevin i├žine tekrar bakabilmesi ve i├žindeki verileri g├Ârebilmesi i├žin ├Âzel bir yetene─či vard─▒r.

 function the_closure() {
  var x = 4;
  return function () {
    return x; // Here, we look back inside the_closure for the value of x
  }
}

var myFn = the_closure();
myFn(); //=> 4
 

Bunu a├ž─▒klaman─▒n ger├žekten basit bir yolu da kapsam a├ž─▒s─▒ndan:

Daha b├╝y├╝k bir kapsam i├žinde daha k├╝├ž├╝k bir kapsam olu┼čturdu─čunuzda, daha k├╝├ž├╝k kapsam her zaman daha b├╝y├╝k kapsamda olan─▒ g├Ârebilecek.


50







JavaScriptÔÇÖteki bir i┼člev yaln─▒zca bir dizi komutun referans─▒ de─čildir (C dilinde oldu─ču gibi), ayn─▒ zamanda kulland─▒─č─▒ t├╝m yerel olmayan de─či┼čkenlere referanslardan olu┼čan gizli bir veri yap─▒s─▒n─▒ i├žerir (yakalanan de─či┼čkenler). Bu iki par├žal─▒ fonksiyona kapatma denir. JavaScript'teki her i┼člev bir kapatma olarak kabul edilebilir.

Kapaklar, durumlu fonksiyonlard─▒r. "Bu", ayn─▒ zamanda bir i┼člev i├žin durum sa─člar, ancak "bu" ayr─▒ nesneler anlam─▒ndad─▒r ("bu" sadece s├╝sl├╝ bir parametredir ve onu kal─▒c─▒ olarak ba─člamak i├žin tek yoldur). i┼člevi bir kapatma olu┼čturmakt─▒r). "Bu" ve i┼člev her zaman ayr─▒ ayr─▒ ya┼čarken, bir i┼člev kapanmas─▒ndan ayr─▒lamaz ve dil yakalanan de─či┼čkenlere eri┼čmek i├žin hi├žbir yol sa─člamaz.

├ç├╝nk├╝, s├Âzl├╝ olarak i├ž i├že ge├žmi┼č bir i┼člev taraf─▒ndan ba┼čvurulan t├╝m bu d─▒┼č de─či┼čkenler, ger├žekte s├Âzc├╝ksel olarak ekleyen i┼člevlerinin zincirindeki yerel de─či┼čkenlerdir (genel de─či┼čkenlerin, baz─▒ k├Âk i┼člevlerinin yerel de─či┼čkenleri oldu─ču varsay─▒labilir) ve bir i┼člevin her y├╝r├╝tmesinin yeni ├Ârnekleri olu┼čturmas─▒ yerel de─či┼čkenlerini, i┼člevini geri d├Ând├╝ren (veya onu geri ├ža─č─▒rma gibi kaydetme gibi) ba┼čka bir i┼člevi yerine getirme i┼čleminin, i├ž i├že ge├žmi┼č bir i┼člevin yeni bir kapama olu┼čturdu─čunu (kendi potansiyel olarak benzersiz, kendi y├╝r├╝tmesini temsil eden ba┼čvurulan yerel olmayan de─či┼čkenler k├╝mesiyle) yarat─▒r ba─člam─▒).

Ayr─▒ca, JavaScript'teki yerel de─či┼čkenlerin y─▒─č─▒n karesinde de─čil ├Âbek ├╝zerinde yarat─▒ld─▒─č─▒n─▒ ve yaln─▒zca hi├ž kimseye g├Ânderme yapmad─▒─č─▒nda imha edildi─čini belirtmek gerekir. Bir i┼člev geri d├Ând├╝─č├╝nde, yerel de─či┼čkenlerine referanslar azal─▒r, ancak mevcut y├╝r├╝tme s─▒ras─▒nda bir kapanman─▒n par├žas─▒ olmu┼člarsa ve hala kendi i├ž i├že ge├žmi┼č i┼člevleri taraf─▒ndan ba┼čvuruda bulunulursa yine de bo┼č olabilirler (bu sadece referanslar e─čer bu i├ž i├že ge├žmi┼č fonksiyonlar iade edildi veya ba┼čka bir harici koda aktar─▒ld─▒).

Bir ├Ârnek:

 function foo (initValue) {
   //This variable is not destroyed when the foo function exits.
   //It is 'captured' by the two nested functions returned below.
   var value = initValue;

   //Note that the two returned functions are created right now.
   //If the foo function is called again, it will return
   //new functions referencing a different 'value' variable.
   return {
       getValue: function () { return value; },
       setValue: function (newValue) { value = newValue; }
   }
}

function bar () {
    //foo sets its local variable 'value' to 5 and returns an object with
    //two functions still referencing that local variable
    var obj = foo(5);

    //Extracting functions just to show that no 'this' is involved here
    var getValue = obj.getValue;
    var setValue = obj.setValue;

    alert(getValue()); //Displays 5
    setValue(10);
    alert(getValue()); //Displays 10

    //At this point getValue and setValue functions are destroyed
    //(in reality they are destroyed at the next iteration of the garbage collector).
    //The local variable 'value' in the foo is no longer referenced by
    //anything and is destroyed too.
}

bar();
 

50







Belki de alt─▒ ya┼č─▒ndan k├╝├ž├╝klerin en erken tan─▒d─▒klar─▒ndan biraz ├Âte, ama JavaScript'te kapanma kavram─▒n─▒ benimsememe yard─▒mc─▒ olan birka├ž ├Ârnek benim i├žin t─▒klay─▒n.

Kapatma, ba┼čka bir i┼člevin kapsam─▒na (de─či┼čkenler ve i┼člevler) eri┼čimi olan bir i┼člevdir. Bir kapan─▒┼č olu┼čturman─▒n en kolay yolu, bir fonksiyon i├žindeki bir fonksiyondur; Bunun nedeni, JavaScript'te bir fonksiyonun her zaman i├žerdi─či fonksiyonun kapsam─▒na eri┼čebilmesidir.

 function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    innerFunction();
}

outerFunction(); 

UYARI: maymun

Yukar─▒daki ├Ârnekte, s─▒rayla innerFunction ad─▒ verilen outerFunction ad─▒ verilir. OuterVar'─▒n do─čru ┼čekilde uyar─▒lmas─▒yla kan─▒tland─▒─č─▒ ┼čekilde outerVar'─▒n innerFunction i┼člevine ne kadar uygun oldu─čunu unutmay─▒n.

┼×imdi a┼ča─č─▒dakileri g├Âz ├Ân├╝nde bulundurun:

 function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction()); 

UYARI: maymun

referenceToInnerFunction, innerFunction i┼člevine basit bir ba┼čvuru d├Ând├╝ren outerFunction () ├Â─česine ayarlan─▒r. ReferenceToInnerFunction ├ža─čr─▒ld─▒─č─▒nda outerVar de─čerini d├Ând├╝r├╝r. Yine, yukar─▒da oldu─ču gibi, bu innerFunction'─▒n outerFar de─či┼čkeninin outerVar'a eri┼čebildi─čini g├Âstermektedir. Ayr─▒ca, d─▒┼č eri┼čimin ├žal─▒┼čmas─▒n─▒ bitirdikten sonra bile bu eri┼čimi korudu─čunu not etmek ilgin├žtir.

Ve i┼čte i┼čler ger├žekten ilgin├žle┼čiyor. OuterFunction i┼člevinden kurtulacak olsayd─▒k, null de─čerine ayarlay─▒n diyoruz, referenceToInnerFunction i┼člevinin outerVar de─čerine eri┼čimini kaybedece─čini d├╝┼č├╝nebilirsiniz. Ancak bu durum b├Âyle de─čil.

 function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

outerFunction = null;
alert(referenceToInnerFunction()); 

UYARI: maymun UYARI: maymun

Ama bu nas─▒l? ReferenceToInnerFunction, outerFunction'─▒n null de─čerine ayarland─▒─č─▒n─▒ belirten outerVar'─▒n de─čerini nas─▒l hala biliyor?

ReferenceToInnerFunction i┼člevinin outerVar de─čerine hala eri┼čebilmesinin nedeni, kapak ilk d─▒┼č i┼člevinin i├žine innerFunction yerle┼čtirilerek olu┼čturuldu─čunda, i├ž i┼člev, d─▒┼č i┼člevinin kapsam─▒na (de─či┼čkenler ve i┼člevler) kapsam zincirine bir ba┼čvuru ekledi. Bunun anlam─▒, innerFunction'─▒n outerVar dahil t├╝m outerFunction de─či┼čkenlerine bir i┼čaret├ži veya referans─▒ oldu─ču anlam─▒na gelir. B├Âylece outerFunction'─▒n ├žal─▒┼čmas─▒ bitmi┼č olsa bile, ya da silinmi┼č ya da null olarak ayarlanm─▒┼č olsa bile, kapsam─▒ndaki de─či┼čkenler, outerVar gibi, getirilen innerFunction i┼člevinin kendilerine yap─▒lan ola─čan├╝st├╝ referans─▒ nedeniyle belle─če yap─▒┼č─▒r. referenceToInnerFunction. OuterVar'─▒ ve outerFunction de─či┼čkenlerinin geri kalan─▒n─▒ bellekten ger├žekten serbest b─▒rakmak i├žin, bu ola─čan├╝st├╝ referanstan kurtulman─▒z gerekir, ├Ârne─čin referenceToInnerFunction i┼člevini null de─čerine ayarlayarak.

//////////

Notlar kapanmas─▒ hakk─▒nda iki ┼čey. ─░lk olarak, kapatma her zaman, i├žerme fonksiyonunun son de─čerlerine eri┼čebilir.

 function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    outerVar = "gorilla";

    innerFunction();
}

outerFunction(); 

UYARI: goril

─░kincisi, bir kapatma yap─▒ld─▒─č─▒nda, t├╝m ├ževreleyen i┼člevlerinin de─či┼čkenlerine ve i┼člevlerine bir at─▒fta bulunur; se├žmek ve se├žmek alamaz. Ve buna ra─čmen, kapaklar haf─▒zada yo─čun olabilece─činden, en az─▒ndan dikkatli bir ┼čekilde kullan─▒lmal─▒d─▒r; Bir i├žerme fonksiyonunun ├žal─▒┼čmas─▒ bittikten sonra ├žok say─▒da de─či┼čken haf─▒zada tutulabilir.


48







Onlar─▒ sadece Mozilla Closures sayfas─▒na y├Ânlendirirdim . Bu , kapatma temelleri ve buldu─čum pratik kullan─▒m─▒n en iyi, en ├Âzl├╝ ve basit a├ž─▒klamas─▒d─▒r . JavaScript ├Â─črenen herkese ┼čiddetle tavsiye edilir.

Ve evet, 6 ya┼č─▒ndaki birine bile tavsiye ederim - 6 ya┼č─▒ndaki kapan─▒┼člarla ilgili bir ┼čey ├Â─čreniyorsa , makalede verilen k─▒sa ve basit bir a├ž─▒klamay─▒ anlamaya haz─▒rlar .


46



─░lgili yay─▒nlar


JavaScript .protope nas─▒l ├žal─▒┼č─▒r?

CSS ├╝├žgenleri nas─▒l ├žal─▒┼č─▒r?

MySQL endeksleri nas─▒l ├žal─▒┼č─▒r?

HttpOnly ├žerezleri AJAX istekleriyle nas─▒l ├žal─▒┼č─▒r?

Vekt├Âr g├Âr├╝nt├╝leri Xcode'da (pdf dosyalar─▒) nas─▒l ├žal─▒┼č─▒r?

├ľnbellek sat─▒rlar─▒ nas─▒l ├žal─▒┼č─▒r?

S├Âzl├╝ksel kapan─▒┼člar nas─▒l ├žal─▒┼č─▒r?

Shift operat├Ârleri Java'da nas─▒l ├žal─▒┼č─▒r? [├žift]

PHP oturumlar─▒ nas─▒l ├žal─▒┼č─▒r? (ÔÇťnas─▒l kullan─▒l─▒rlar?ÔÇŁ de─čil)

Mockito e┼čle┼čtiricileri nas─▒l ├žal─▒┼č─▒r?

Etiketle ilgili di─čer sorular [javascript]


Java'da genel, korumal─▒, ├Âzel paket ile ├Âzel aras─▒ndaki fark nedir?

S├Âzler ve G├Âzlenebilirler aras─▒ndaki fark nedir?

Renklerde onalt─▒l─▒k saydaml─▒k [kopya]

K├╝├ž├╝k harf duyars─▒z dize kar┼č─▒la┼čt─▒rmas─▒ nas─▒l yap─▒l─▒r?

Bilgisayar bilimlerinde NP tamamlama nedir?

Linux komut sat─▒r─▒nda birden fazla dosyada bir dize nas─▒l de─či┼čtirilir

Bash i├žindeki bir tamsay─▒ dizisini s─▒f─▒rlamak nas─▒l yap─▒l─▒r, b├Âylece hepsi ayn─▒ geni┼čli─če sahiptir?

Docker'da, bir kapsay─▒c─▒ ile g├Âr├╝nt├╝ aras─▒ndaki fark nedir? [├žift]

C++ 'da geri ├ža─č─▒rma i┼člevleri

Giri┼čleri say─▒ olarak nas─▒l okuyabilirim?