A closure szerepe a javascriptben

473 views
393 views

Published on

Budapest.js 2010.03.30.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
473
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A closure szerepe a javascriptben

  1. 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őekmaradnak, 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. 2. Adatrejtés, OOPvar 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() ); // 32010.03.30. – Budapest.js A closure szerepe a Javascriptben © FARKAS Máté – 2
  3. 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. 4. Név ütközések elkerülésejQuery.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 konfliktusalert($); // 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. 5. Időzítésekvar 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, ígytimer($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

×