Új hozzászólás Aktív témák

• Zedz addikt

  #4231

  #4228 Jim-Y

  2014-07-29 08:13:35

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Zedz

  addikt

  #4228 Jim-Y

  #4228 Jim-Y

  Na, akkor legalább volt értelme a példának.
  Ezt írja a konzolra:
  
  Vagyis
  10
  10
  10
  10
  10

  Magyarázat: (ha esetleg valamit rosszul írnék, akkor javítsatok ki többiek, nem szeretném ha valamit az én hibámból jegyezne meg rosszul

  1:
  for (var i = 1; i < 6; ++i) {
  //...
  }

  Ezt az interpreter így értelmezi:

  var i = undefined;
  for(i = 1; i < 6; ++i) {
  //...
  }

  Tehát az i ciklusváltozót felemeli a függvény törzsének elejére, majd undefined-ként deklarálja.

  2:
  cont.addEventListener('click', function () {
  console.log(i);
  });

  Minden click eseményre a cont objektumon/elementen regisztrál egy névtelen függvényt. A lényeges momentum, hogy minden függvény javascriptben látja/tartalmazza az őt körülvevő függvények kontextusát.

  function a() {
  var i = 10;
  function b() {
  var j = function() { return 11; };
  function c() {
  console.log(i); // 10
  console.log(j()); //11
  }
  c();
  }
  b();
  }
  a();

  Az eredeti példánál maradva az anonim függvény látja az őt körülvevő test függvény kontextusát, így az i változót is. Az addEventListener függvényel olyan működést definiálunk, ami valamikor a jövőben fog lezajlani (amikor klikkelünk az elemre), ezért a ciklus már rég végez mire mi az elemre klikkelünk.

  3:
  amikor végül rányomunk a div-re, az i már a ciklus végén 6, majd egy újabb értékadással i = 10. Ne felejtsük, hogy az összes anonim függvény "cipeli" magával a test függvény kontextusát amiben az i változóhoz már a 10 érték van rendelve, ezért fog 5 x 10-et kiírni a program a konzolra.

  A megoldás az lehet, ha minden anonim függvénynek/hez egy új kontextus-t rendelünk, amiben az i változó a ciklusban éppen aktuális értéken fog szerepelni.

  Példa és megoldás:

  var cont = document.querySelector('#container');

  function test() {
  for (var i = 1; i < 6; ++i) {
  
  (function (i) {
  cont.addEventListener('click', function () {
  console.log(i);
  });
  }(i));
  }
  
  i = 10;
  }
  test();

  A (function() { .. }()); egy új kontextust generál amibe elmentjük az i ciklusváltozó aktuális értékét így az mindig fix marad.

  üdv

  Köszönöm a részletes választ, jó dolog ilyen alapokkal is tisztában lenni.

Új hozzászólás Aktív témák