Budapest.js 2010.03.30.

1. Mi a closure?
A closure olyan objektum (függvény, tömb, stb), ami egy másik függvényen belül lett
létrehozva és hivatkozik a létrehozó függvényben lévő némely változókra. Ezáltal a
létrehozó függvény változói (scope-ja) a függvény futása után is elérhetőek
maradnak, amíg csak szükséges. Gyakorlati alkalmazásait a következő diákon mutatom
be.
var szamlalo = (function() { A szamlalo egy függvényt kap
var counter = 0; értékként, mikor a külső függvény
return function() { return counter++; }; lefut. A benne létrehozott
})(); counter változó életben marad,
alert( szamlalo() + '->' + szamlalo() ); mert hivatkozunk rá a külső
függvényből való kilépés után is.
var pelda = function() {
var variable = 40; Itt viszont nincs closure, mert
var func = function() { return variable + 1 }; a pelda függvényből való
return func() + 1; kilépés után semmilyen belső
}; változóra nincs hivatkozás.
alert(pelda());
2010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 1

2. Adatrejtés, OOP
var newObject = function( step ) {
var variable = 1; // "private" variable
var change = function( diff ) { // "private" function
variable += diff * step;
};
return { // "public" functions
get: function() { return variable; },
inc: function() { change(1); }
};
};
var object = newObject( 2 );
object.inc();
alert( object.get() ); // 3
2010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 2

3. Callback függvények
$('div').click(function() {
var $t = $(this);
$t.fadeOut( function() {
alert( $t.html() + ' or ' + computedVariable + '?');
});
$t.html('Nothing');
var computedVariable = 42;
});
Kattintásra létrehozzuk a $t változót, elindítjuk az
eltűnést, módosítjük a div tartalmát és létrehozunk egy
újabb változót, ezzel a külső függvény futása véget ér. Az
eltűnés végeztével kerül a vezérlés a callback
függvényhez, amely számára minden szükséges változó
megőrzésre került.
2010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 3

4. Név ütközések elkerülése
jQuery.noConflict();
(function( $ ) {
window.changeSomething = function() {
$('div').css('background','#ff0');
}
})( jQuery ); Ha más keretrendszerrel együtt használjuk a
jQuery-t, nem szeretnénk, hogy a mindkettő
changeSomething(); által használt $ függvény miatt konfliktus
alert($); // undefined legyen. A jQuery-re támaszkodó függvé-
nyeinket külön scope-ba tesszük, így ezen
belül a $ mindig a jQuery-t jelenti, és ezen
kívül sem okoz konfliktust.
2010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 4

5. Időzítések
var timer = function( $d, start, end ) {
var counter = start;
(function() { // one step
counter++;
$d.html( counter );
if (counter < end )
setTimeout( arguments.callee, 500 );
else alert('Finished');
})();
} Az időzítők (setTimeout, setInterval)
var $d = $('div'); a globális névtérben dolgoznak, így
timer($d, 0, 10); closure-t hoznak létre – az sem baj,
ha névtelen függvénnyel dolgozunk.
$d.css('background','#ff0');
2010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 5