Object Oriented JavaScript

Object Oriented
JavaScript
avagy JavaScriptben miért
nem JavaScriptül programozunk?

Farkas Máté
Budapest.js, 2013. január 14.

Összefoglaló

A következőkről lesz szó

1.Objektumok létrehozása, azaz a prototípus
alapú öröklődés – kell ez nekünk?

2.Objektumok működése: metódusok,
függvények – mi az a this?

Megvizsgáljuk, hogy a gyakorlat hol
és miért tér el az elmélettől.

Példák

Miért kell ez?
// Mootools // YUI
var Monkey = new Class({ var Monkey = Y.Base.create('monkey',
initialize: function(name){ null, [], {
this.name = name; initializer: function(name) {
} this.name = name;
}); }
});
// Prototype
var Monkey = Class.create({ // dojo
initialize: function(name) { var Monkey = declare(null, {
this.name = name; constructor: function(name){
} this.name = name;
}); }
});

http://h3manth.com/content/classes-javascript-es6

Objektum Orientált JavaScript

• A JavaScript objektum orientált.
• A primitív típusokon kívül minden objektum,
még a függvények, tömbök is
• Egy objektumnak vannak tulajdonságai és
„metódusai”
• A kérdéses dolog az, hogy hogyan hozzuk létre az
objektumokat: nincsenek osztályok, prototípus
alapú az öröklődés

Objektum létrehozás (osztályok)

Osztály alapú objektum orientáltság

Person Viola

Osztályok közötti
Employee Ádám hierarchia, majd
példányosítás

Boss Igor

osztály példány

Objektum létrehozás (prototípus)

Prototípusos objektum orientáltság
PersonCreator
Objektumok közötti
Viola
hierarchia
EmployeeCreator

Ádám

BossCreator

Igor
konstruktor
függvény objektum


PersonCreator
A konstruktor függvény
Viola egy konkrét, létező
EmployeeCreator
objektumból hoz létre
egy másikat
Ádám

BossCreator

Igor
konstruktor
függvény objektum


PersonCreator
A konstruktor függvény a
Viola megadott „minta”
EmployeeCreator
alapján készít egy új
objektumot úgy, hogy
Ádám megmondja, miben
BossCreator
különbözik (a minta
nem része a konstruk-
konstruktor
Igor
tor függvénynek)
függvény objektum

Objektum létrehozás (prototípus példa)

Például

Viola


Például

Viola

EmployeeCreator


Például

Viola

EmployeeCreator

Ádám


Például

Viola Ivett

EmployeeCreator EmployeeCreator

Ádám Zsolt

A létrehozás folyamata

var adam = new EmployeeCreator();
1.Létrehoz egy új objektumot a függvénynek átadott
prototípus szerint
2.Beállítja, hogy ezt az új objektumot a függvény
hozta létre (instanceof)
3.Meghívja a függvényt, hogy inicializálja (módosítsa,
állítsa be) az új objektumot

Mi ezzel a baj?

PersonCreator.prototype.name = …
EmployeeCreator.prototype.salary = …

• Ha nem határozzuk meg, a függvénynek átadott
prototípus egy új üres objektum lesz
• Ezt módosítva megadhatjuk, hogy milyen
objektumokat tudjon létrehozni, de elveszítjük az
öröklés lehetőségét

Objektum létrehozás (prototype-pal)

függvény.prototype állítással
PersonCreator

PersonProto Viola

EmployeeCreator

EmployeeProto Ádám

BossCreator

BossProto Igor

Gyakorlat

• Ádám egy munkavállaló, 12 ezer eurós fizetéssel.

PersonCreator

Ádám

EmployeeCreator

Ádám,
12e EUR

Gyakorlat

• Ádám egy munkavállaló, 12 ezer eurós fizetéssel.
• Zsolt egy munkavállaló, 13 ezer eurós fizetéssel.

PersonCreator PersonCreator

Ádám Zsolt

EmployeeCreator EmployeeCreator

Ádám, Zsolt,
12e EUR 13e EUR

Így tud működni

function PersonCreator(name) {
this.name = name; }
function EmployeeCreator(salary) {
this.salary = salary; }

var adamPerson = new PersonCreator(‘Ádám’);
EmployeeCreator.prototype = adamPerson;
var adam = new EmployeeCreator(12);

// adam instanceof PersonCreator
// adam instanceof EmployeeCreator

Így tud működni

function PersonCreator(name) {
this.name = name; }
function EmployeeCreator(salary) {
this.salary = salary; }

var adamPerson = Object.create({});
PersonCreator.call(adamPerson, ‘Ádám’);
var adam = Object.create(adamPerson);
EmployeeCreator.call(adam, 12);

// ez az elmélet, de nincs instanceof,
// és nem hatékony

Mixinek

Előny: mixinek használata, könnyű viselkedéssel
kiterjeszteni egy objektumot

var adam = {};
PersonCreator.call(adam, ‘Ádám’);
EmployeeCreator.call(adam, 12);
DriverMixin(adam);

adam.driveTo(‘Paris’);

Miért használjuk mégis?

Miért használjuk mégis a prototype-ot?

Ivett

Viola

Hatékonyság miatt.

Megoldási lehetőségek

• Sok féle megoldási lehetőség van, szinte minden
library kidolgozott magának valamit
• MooTools
• Dojo
• YUI
• Prototype
• class.js (John Resig)

No, ez mi?

var globalScope = (function () {
return (0, eval)('this');
}());

No, ez mi?

var globalScope = (function () {
return (0, eval)('this');
}());

Meghívható
objektumra mutat

Függvény

• A JavaScriptben a függvény egy futtatható
objektum a memóriában, erre az objektumra
hivatkozhatunk sokféleképpen
• Ha egy objektum tulajdonságaként hivatkozva
hívjuk meg, akkor metódusként fog működni, és
„a függvény belsejében a this értéke az adott
objektum lesz.”

Függvény, metódus

function fn() {}

var b = fn; obj.c = b;
obj.getFn = function() { return fn; }

fn(); b(); obj.c(); obj.getFn()();

Objektum, metódusok…

Klasszikus objektum metódusokkal


JavaScript objektum „metódusokkal” *
c fn
obj

* függvény típusú tulajdonságokkal


A valódi esetben a prototípusban van

obj2
obj1

c fn

Program futási folyamat

Klasszikus program futási folyamat

Van egy hosszú futási
szálunk, ami vagy aktív,
vagy alszik, ezen belül
vannak blokkok,
függvények, stb…


JavaScript program futási folyamat

Sok kis apró, gyorsan lefutó függvény


JavaScript program futási folyamat

doStuff

function doStuff() {
1 doAsync(function(result) {
3
4 parse(result);
5 doAsync
});
2 parse
}

Metódus

• Elmélet: A JavaScriptben ha egy objektum
tulajdonságaként hívunk meg egy függvényt, akkor
az az adott objektum metódusaként viselkedik, azaz
benne a this értéke az adott objektum lesz.
•

obj.greetAll = function() {
this……
};

Metódus

• Elmélet: A JavaScriptben ha egy objektum
tulajdonságaként hívunk meg egy függvényt, akkor
az az adott objektum metódusaként viselkedik, azaz
benne a this értéke az adott objektum lesz.
• Gyakorlat: Kivéve, ha a függvényen belül van egy
másik függvény… 

this.names.forEach(function() {…});
};

Megoldási lehetőségek: this

• Használjunk mindenhol this-t!
• Nem működik. 

this.names.forEach(function() {…});
};

Megoldási lehetőségek: this + bind

• Bind-oljuk a this-t, ahol kell
• CoffeeScript-nél is ezt próbálták egy időben
• A gyakorlatban nem megvalósítható.

this.names.forEach(function() {
// …
}.bind(this));
};

Megoldási lehetőségek: _this

• Használjunk _this-t, ahol kell
• Mehet a prototípus szerinti öröklődés, de a kódunk
nem lesz egységes (valahol this, valahol _this
van, tipikusan gondot okoz a kód áthelyezésnél)

var _this = this;
this.names.forEach(function() {
/* itt _this kell */ });
};

Megoldási lehetőségek: _this

• Használjunk mindenhol _this-t
• Minden metódus funkciójú függvényünket kezdjük
azzal, hogy meghatározzuk a _this -t.
• Konzisztens, de lusták vagyunk megtenni. 

var _this = this;
_this.names.forEach(function() {
/* itt _this kell */ });
};

Megoldási lehetőségek: that

• Használjunk that-et és closure-okat
• Nem JavaScript-es szemléletű, de jól tömöríthető

function AllGreeter(greeting, names) {
var that = new Greeter(greeting); // !!!
that.greetAll = function() {
names.forEach(function(name) {
that.greet(name);
});
};
return that;
}

Megoldási lehetőségek: TypeScript, CoffeeScript

• Mint a demóban is látható volt, a JavaScript-re
épülő nyelvek segítségével nem szükséges olyan
nagy kódot írnunk, és JavaScript-es szemlélettel
programozhatunk.

Kérdések?

Farkas Máté
Budapest.js, 2013. január 14.

Links

Az előadó:
• http://farkas-mate.hu/
• http://virtual-call-center.eu/

Object Oriented JavaScript

Recommended

Recommended

More Related Content

Featured

Featured (20)

Object Oriented JavaScript