Classes in ECMAScript 5

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

Objektum Orientált JavaScript
A JavaScript Objektum Orientált de nem osztály, hanem prototípus alapú

Osztály alapú OO

Prototípus alapú OO

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

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.

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

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

… 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…

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

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

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

Egy alternatív lehetőség a „that”
function M yClass() {
var that = this;
that .method = function() {
return that .myArr.map(function(val) {
return that .scale * val; });
}
return that ;
};

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

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

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

Egy osztályban
a definíciós részen mondom meg a láthatóságot, utána nem kell foglalkoznom vele

Egy osztály
metódusai nem élnek különálló életet (a metódus „kötve van” az osztályhoz)

Egy osztály
- metódusait felül lehet definiálni, ez az ősosztályban is érvényesül, de el tudom érni az eredetit

Egy osztály
- példányai ellenőrizhetőek instanceOf „függvénnyel” (a leszármazott osztály példányai is!)

Egy osztály
- ősosztályának protected tagját publikussá tehetem az ősosztály változtatása nélkül

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

ES5Class
function MySubClass() {
var that = Module.create(this, MyClass );
that.public.method = function() {
alert( that.str ); // ‘Hello’
};
}

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

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

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

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

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

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

Classes in ECMAScript 5

by Máté Farkas on Jul 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Classes in ECMAScript 5 — Presentation Transcript