JavaScript anonimne funkcije

Referenca na funkciju

  var obj = {x:150, y:120};
  obj.kretanje = function(dx, dy) {
    this.x += dx;
    this.y += dy;
  };

  obj.kretanje(10, 5);
		

Ovo je relativno jednostavna primer, gde smo definisali objekat obj sa svojstvima x i y (recimo da su to koordinate). Takođe smo definisali i dodatno svojstvo obj.kretanje kao referencu na anonimnu funkciju koja prima dva parametra dx i dy, koja onda sabira sa svojstvima objekta. Time ova referenca efektivno postaje metod objekta.

Callback funkcija

	window.setTimeout(function() {
	  location.href = "http://webnstudy.com";
	}, 5000);
	
	niz.sort(function(a,b) {
	  return b-a;
	});
		

Prvi primer demonstrira upotrebu anonimne callback funkcije prilikom postavljanja tajmera. Zadali smo da se posle 5 sekundi izvrši anonimna funkcija koja zadaje web čitaču novu lokaciju. Dakle, kada se poziv metodu setTimeout izvrši, neće se ništa desiti, ali kada se "odbroji" 5 sekundi (5000 milisekundi), poziva se zadata callback funkcija.

Drugi primer nam je poznat iz teksta u kome smo objašnjavali sortiranje niza. Suštiniski, algoritam prolazi kroz elemente niza, a za svako upoređivanje poziva anonimnu callback funkciju koju smo zadali, i koja "odlučuje" da li elemente a i b treba zameniti.

Lambda izrazi

  function ispis(fun) {
    return function() {
      var r = fun.apply(null, arguments);
      console.log(r);
      return r;
    };
  }
  
  var calc = ispis(function(a,b) {
    return a+b;
  });
  
  var x = calc(5, 10) * 2;   // ispis: 15 (ispisuje rezultat )
  console.log(x);
		

Ok, ovde smo namerno malo preterali da bismo demonstrirali kako možemo da prosleđujemo i dobijamo kao rezultat anonimnu funkciju.

Funkcija ispis() kao parametar uzima neku funkciju, a kao rezultat vraća novu funkciju. Ova nova funkcija je anonimna. Inače nova funkcija "omotava" prosleđenu funkciju i služi da za bilo koju zadatu funkciju ispiše njen rezultat u konzoli. Najpre se prosleđena funkcija pozove da bi se njen rezultat zabeležio, onda se taj rezultat ispiše, a na kraju se rezultat vrati, kao da je prosleđena funkcija bila originalno pozvana. Pošto ne znamo koliko će parametara imati prosleđena funkcija, mormao da je pozovemo preko metoda apply() koji kao parametre prosleđuje niz, a ne pojedinačne parametre. Više o ovom metodu pročitajte u tekstu o parametrima funkcije.

Dalje u našem primeru definišemo calc kao referencu na funkciju koju će nam vratiti funkcija ispis(). Ovde opet koristimo anonimnu funkciju ali kao parametar sa kojim se poziva funkcija ispis(). Ova anonimna funkcija prima dva parametra a i b, i kao rezultat vraća njihov zbir.

Na kraju konačno testiramo da li sve radi. Računamo x tako što pozovemo funkciju preko reference calc() kojoj smo zadali dva broja. Funkcija calc() je u stvari funkcija koju smo "vratili" i kao rezultat će dati zbir dva prosleđena broja (to je anonimna funkcija koju smo prosledili), ali takođe i ispisuje taj zbir (vraćena funkcija koja je omotala prosleđenu funkciju).

Samopozivajuće funkcije

  (function(x,y) {
    var blok = document.createElement("div");
    blok.innerHTML = "Novi DIV blok";
    blok.onclick = function() {
      blok.style.width = x + "px";
      blok.style.height = y + "px";
    };
    document.body.appendChild(blok);
  })(250, 100);
		

U gornjem primeru smo napravili samopozivajuću anonimnu funkciju koja se izvršava odmah i prima dva parametra (250 kao x i 100 kao y). Funkcija kreira DIV elemenat na koji pokazuje referenca blok. Definišemo sadržaj bloka i na kraju ga dodajemo na kraj dokumenta (body).

Kao bonus, definisali smo i anonimnu funkciju kao event handler, koja se izvršava kada se klikne na blok koji smo napravili.

Ostali smo dužni da pokažemo kako nas samopozivajuća funkcija spašava od closure zamke. Sećate se ovog primera? Problem je bio kako sačuvati vrednosti promenljivih iz nadfunkcije u trenutku kreiranja closure funkcije.

Ideja je da "umotamo" kreiranje closure-a u samopozivajuću funkciju:

	function napravi(N)
	{
	  var blok;
	  for (var i=1; i<=N; i++) {
  	  blok = document.createElement("div");
  	  blok.innerHTML = "Klikni me.";
  	  (function() {                  // anonimna samopozivajuća funkcija
  	    var rbr = i;                 // lokalno pamtimo vrednost od i 
    	  blok.onclick = function()    // i tu praviomo event handler
	      {
	        this.innerHTML = "Ovo je BLOK " + rbr;  // ovo funkcioniše
	      };
  	  }());
  	  document.body.appendChild(blok);
	  }
	}
	
	//...
	
	napravi(10);
		

Jeste li shvatili šta se dešava? Samopozivajuća funkcija je takođe closure. Dakle, kada kreiramo DIV blok, odmah se izvršava ova funkcija - ona ima pristup "nadpromenljivoj" i i beleži je u svoju lokalnu promenljivu rbr.

Onda unutar nje kreiramo event handler funkciju, koja je closure od closure-a, što je sasvim regularno. Promenljiva rbr će uvek imati onu vrednost promenljive i koaj je bila u trenutku kreiranja.