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

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. Objektum Orientált JavaScript
A JavaScript Objektum Orientált
de nem osztály, hanem
prototípus alapú

3. Osztály alapú OO

4. Prototípus alapú OO

5. Miért nehéz megérteni?
myProgram =
new Programmer();
myProgram instanceof
Programmer

6. A „this” működése
Fü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. A „this” működése
a = function(){};
x.b = a; yyy.ccc.dd = x.b;
a(); // undefined vagy global
x.b(); // x
yyy.ccc.dd(); // yyy.ccc

8. Nagyfokú rugalmasság
MicroEvent.mixin(Ticker);
var ticker = new Ticker();
ticker.bind('tick', fn);
→ this.trigger('tick',arg1,arg2);

9. …akkor mi a probléma?
Csak egyfajta függvény
létezik, és sok helyen kell:
Timeout, AJAX, események,
tömb kezelő függvények, stb…

10. Az egyik megoldás: „_this”
.method = function() {
var _this = this;
return this.myArr.map(function(val) {
return _this.scale * val;
});
};

11. A másik (nem) megoldás az új fv
.method = function() {
return this.myArr.map(
#(val) { this.scale * val; }
);
};

12. A másik (nem) megoldás az új fv
.method = function() {
return this.myArr.map(
#@(val) { -> @scale * val; }
);
};

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. Előnye
A „that” használatának
előnye a klasszikus kötés:
var obj = new MyClass();
setTimeout(obj.method, 1000);

15. Hátránya
…hátránya például, hogy
hogyan bővítjük ki az így
létrehozott objektumot?

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. 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. 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. 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. 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. 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. ES5Class
function 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. ES5Class
function MySubClass() {
var that = Module.create(this, MyClass);
that.public.method = function() {
alert(that.str); // ‘Hello’
};
return Module.finalize( that );
}

24. ES5Class
function MyClass2() {
var that = Module.create(this, arguments);
that.private.count = 0;
that.__constructor__ = function(init) {
that.count = init; // 12
};
/*…*/
}
new MyClass2(12);

25. ES5Class
var o = new MySubClass();
Module.instanceOf(o, MySubClass ) // true
Module.instanceOf(o, MyClass ) // true

26. ES5Class
function MySubClass() { /*…*/
that.protected.method1 = function() { /*…*/ };
that.public.method = function() {
return that.method1() +
that.super.method1();
}
return Module.finalize( that );
}

27. Hátrányai
Nincs IDE támogatás hozzá
Kicsit lassabb, mint a prototípus
alapú megközelítés

28. Böngésző támogatottság
ECMAScript 5 alatt teljes
értékűen (IE9+)
Ha van getter/setter lehetőség,
akkor is működik jól

29. HTTP://WWW.VIRTUAL-CALL-CENTER.EU/
ECMAScript 5:
Osztályok
már(pedig)
léteznek
Farkas Máté
Budapest.js, 2011.07.12.