ECMAScript 5 Classes

399 views

Published on

Osztályok már(pedig) léteznek!
Budapest.js 2011.07.12.

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

  • Be the first to like this

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

No notes for slide

ECMAScript 5 Classes

  1. 1. HTTP://WWW.VIRTUAL-CALL-CENTER.EU/ ECMAScript 5: Osztályok már(pedig) léteznek Farkas Máté Budapest.js, 2011.07.12.
  2. 2. Objektum Orientált JavaScriptA JavaScript Objektum Orientált de nem osztály, hanem prototípus alapú
  3. 3. Osztály alapú OO
  4. 4. Prototípus alapú OO
  5. 5. Miért nehéz megérteni?myProgram = new Programmer();myProgram instanceof Programmer
  6. 6. A „this” működéseFüggvényen belül a this az az objektum, ami a függvény meghívásakor a függvény előtti pont előtt volt.
  7. 7. A „this” működésea = function(){};x.b = a; yyy.ccc.dd = x.b;a(); // undefined vagy globalx.b(); // xyyy.ccc.dd(); // yyy.ccc
  8. 8. Nagyfokú rugalmasságMicroEvent.mixin(Ticker);var ticker = new Ticker();ticker.bind(tick, fn);→ this.trigger(tick,arg1,arg2);
  9. 9. …akkor mi a probléma?Csak egyfajta függvénylétezik, és sok helyen kell:Timeout, AJAX, események, tömb kezelő függvények, stb…
  10. 10. Az egyik megoldás: „_this”.method = function() { var _this = this; return this.myArr.map(function(val) { return _this.scale * val; });};
  11. 11. A másik (nem) megoldás az új fv.method = function() { return this.myArr.map( #(val) { this.scale * val; } );};
  12. 12. A másik (nem) megoldás az új fv.method = function() { return this.myArr.map( #@(val) { -> @scale * val; } );};
  13. 13. Egy alternatív lehetőség a „that”function MyClass() { var that = this; that.method = function() { return that.myArr.map(function(val) { return that.scale * val; }); } return that;};
  14. 14. ElőnyeA „that” használatánakelőnye a klasszikus kötés:var obj = new MyClass();setTimeout(obj.method, 1000);
  15. 15. Hátránya…hátránya például, hogy hogyan bővítjük ki az így létrehozott objektumot?
  16. 16. Milyen egy osztály?Egy osztályban- először leírjuk a struktúrát, amit aztán nem változtatunk- van lehetőség az adattagok és metódusok láthatóságának meghatározására
  17. 17. Milyen egy osztály?Egy osztályban- a definíciós részen mondom meg a láthatóságot, utána nem kell foglalkoznom vele
  18. 18. Milyen egy osztály?Egy osztály- metódusai nem élnek különálló életet (a metódus „kötve van” az osztályhoz)
  19. 19. Milyen egy osztály?Egy osztály- metódusait felül lehet definiálni, ez az ősosztályban is érvényesül, de el tudom érni az eredetit
  20. 20. Milyen egy osztály?Egy osztály- példányai ellenőrizhetőek instanceOf „függvénnyel” (a leszármazott osztály példányai is!)
  21. 21. Milyen egy osztály?Egy osztály- ősosztályának protected tagját publikussá tehetem az ősosztály változtatása nélkül
  22. 22. ES5Classfunction MyClass() { var that = Module.create(this); that.private.prop = 42; that.protected.str = ‘Hello’; that.public.bool = true; return Module.finalize( that );}var o = new MyClass(); o.bool === true;o.prop === o.str === undefined
  23. 23. ES5Classfunction MySubClass() { var that = Module.create(this, MyClass); that.public.method = function() { alert(that.str); // ‘Hello’ }; return Module.finalize( that );}
  24. 24. ES5Classfunction MyClass2() { var that = Module.create(this, arguments); that.private.count = 0; that.__constructor__ = function(init) { that.count = init; // 12 }; /*…*/}new MyClass2(12);
  25. 25. ES5Classvar o = new MySubClass();Module.instanceOf(o, MySubClass ) // trueModule.instanceOf(o, MyClass ) // true
  26. 26. ES5Classfunction MySubClass() { /*…*/ that.protected.method1 = function() { /*…*/ }; that.public.method = function() { return that.method1() + that.super.method1(); } return Module.finalize( that );}
  27. 27. HátrányaiNincs IDE támogatás hozzáKicsit lassabb, mint a prototípus alapú megközelítés
  28. 28. Böngésző támogatottságECMAScript 5 alatt teljes értékűen (IE9+)Ha van getter/setter lehetőség, akkor is működik jól
  29. 29. HTTP://WWW.VIRTUAL-CALL-CENTER.EU/ ECMAScript 5: Osztályok már(pedig) léteznek Farkas Máté Budapest.js, 2011.07.12.

×