Object Oriented                                  JavaScript                                   avagy JavaScriptben miért   ...
Ö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.Objekt...
Prototípusosság
PéldákMiért kell ez?// Mootools                                // YUIvar Monkey = new Class({                   var Monkey...
Objektum Orientált JavaScript• A JavaScript objektum orientált.• A primitív típusokon kívül minden objektum,  még a függvé...
Objektum létrehozás (osztályok)Osztály alapú objektum orientáltság    Person              Viola                           ...
Objektum létrehozás (prototípus)Prototípusos objektum orientáltság           PersonCreator                                ...
Objektum létrehozás (prototípus)Prototípusos objektum orientáltság           PersonCreator                                ...
Objektum létrehozás (prototípus)Prototípusos objektum orientáltság           PersonCreator                                ...
Objektum létrehozás (prototípus példa)Például                        Viola
Objektum létrehozás (prototípus példa)Például                        Viola     EmployeeCreator
Objektum létrehozás (prototípus példa)Például                        Viola     EmployeeCreator
Objektum létrehozás (prototípus példa)Például                        Viola     EmployeeCreator                        Ádám
Objektum létrehozás (prototípus példa)Például                        Viola                         Ivett     EmployeeCreat...
A létrehozás folyamata      var adam = new EmployeeCreator();1.Létrehoz egy új objektumot a függvénynek átadott  prototípu...
Mi ezzel a baj?     PersonCreator.prototype.name = …   EmployeeCreator.prototype.salary = …• Ha nem határozzuk meg, a függ...
Objektum létrehozás (prototype-pal)függvény.prototype állítással                             PersonCreator            Pers...
Gyakorlat• Ádám egy munkavállaló, 12 ezer eurós fizetéssel.      PersonCreator                        Ádám     EmployeeCre...
Gyakorlat• Ádám egy munkavállaló, 12 ezer eurós fizetéssel.• Zsolt egy munkavállaló, 13 ezer eurós fizetéssel.      Person...
Így tud működnifunction PersonCreator(name) {  this.name = name; }function EmployeeCreator(salary) {  this.salary = salary...
Így tud működnifunction PersonCreator(name) {  this.name = name; }function EmployeeCreator(salary) {  this.salary = salary...
MixinekElőny: mixinek használata, könnyű viselkedéssel  kiterjeszteni egy objektumotvar adam = {};PersonCreator.call(adam,...
Miért használjuk mégis?Miért használjuk mégis a prototype-ot?                                         Ivett        ViolaHa...
Megoldási lehetőségek• Sok féle megoldási lehetőség van, szinte minden  library kidolgozott magának valamit• MooTools• Doj...
Az a bizonyos this
No, ez mi?var globalScope = (function () {   return (0, eval)(this);}());
No, ez mi?var globalScope = (function () {   return (0, eval)(this);}());                Meghívható             objektumra...
Függvény• A JavaScriptben a függvény egy futtatható  objektum a memóriában, erre az objektumra  hivatkozhatunk sokféleképp...
Függvény, metódus                function fn() {}var b = fn;         obj.c = b;obj.getFn = function() { return fn; }fn(); ...
Objektum, metódusok…Klasszikus objektum metódusokkal
Objektum, metódusok…JavaScript objektum „metódusokkal” *         c        fn     obj* függvény típusú tulajdonságokkal
Objektum, metódusok…A valódi esetben a prototípusban van                           obj2         obj1                      ...
Program futási folyamatKlasszikus program futási folyamat                          Van egy hosszú futási                  ...
Program futási folyamatJavaScript program futási folyamat  Sok kis apró, gyorsan lefutó függvény
Program futási folyamatJavaScript program futási folyamat                               doStufffunction doStuff() {1 doAsy...
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ódus• Elmélet: A JavaScriptben ha egy objektum  tulajdonságaként hívunk meg egy függvényt, akkor  az az adott objektum ...
Megoldási lehetőségek: this• Használjunk mindenhol this-t!• Nem működik. obj.greetAll = function() {    this.names.forEac...
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 gyakor...
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...
Megoldási lehetőségek: _this• Használjunk mindenhol _this-t• Minden metódus funkciójú függvényünket kezdjük  azzal, hogy m...
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...
Megoldási lehetőségek: TypeScript, CoffeeScript• Mint a demóban is látható volt, a JavaScript-re  épülő nyelvek segítségév...
Kérdések?Farkas MátéBudapest.js, 2013. január 14.
LinksAz előadó:   • http://farkas-mate.hu/   • http://virtual-call-center.eu/
Upcoming SlideShare
Loading in …5
×

Object Oriented JavaScript

1,134 views

Published on

Nagyn eltökéltnek kell lennünk ahhoz, hogy JavaScript szintaxissal a JavaScript szemléletének megfelelően tudjunk programozni. JS-re épülő nyelvekkel (CoffeeScript, TypeScript) ez könnyebben megvalósítható.

Miért van ez, mit ért a JavaScript az objektum orientáltság alatt, hogyan működik a prototípusos öröklődés, mi az a this?

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

  • Be the first to like this

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Object Oriented JavaScript

  1. 1. Object Oriented JavaScript avagy JavaScriptben miért nem JavaScriptül programozunk?Farkas MátéBudapest.js, 2013. január 14.
  2. 2. Ö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.
  3. 3. Prototípusosság
  4. 4. PéldákMiért kell ez?// Mootools // YUIvar Monkey = new Class({ var Monkey = Y.Base.create(monkey, initialize: function(name){ null, [], { this.name = name; initializer: function(name) { } this.name = name;}); } });// Prototypevar 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Objektum létrehozás (prototípus)Prototípusos objektum orientáltság 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
  9. 9. Objektum létrehozás (prototípus)Prototípusos objektum orientáltság 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
  10. 10. Objektum létrehozás (prototípus példa)Például Viola
  11. 11. Objektum létrehozás (prototípus példa)Például Viola EmployeeCreator
  12. 12. Objektum létrehozás (prototípus példa)Például Viola EmployeeCreator
  13. 13. Objektum létrehozás (prototípus példa)Például Viola EmployeeCreator Ádám
  14. 14. Objektum létrehozás (prototípus példa)Például Viola Ivett EmployeeCreator EmployeeCreator Ádám Zsolt
  15. 15. A létrehozás folyamata var adam = new EmployeeCreator();1.Létrehoz egy új objektumot a függvénynek átadott prototípus szerint2.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
  16. 16. 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
  17. 17. Objektum létrehozás (prototype-pal)függvény.prototype állítással PersonCreator PersonProto Viola EmployeeCreator EmployeeProto Ádám BossCreator BossProto Igor
  18. 18. Gyakorlat• Ádám egy munkavállaló, 12 ezer eurós fizetéssel. PersonCreator Ádám EmployeeCreator Ádám, 12e EUR
  19. 19. 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
  20. 20. Így tud működnifunction 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
  21. 21. Így tud működnifunction 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
  22. 22. MixinekElőny: mixinek használata, könnyű viselkedéssel kiterjeszteni egy objektumotvar adam = {};PersonCreator.call(adam, ‘Ádám’);EmployeeCreator.call(adam, 12);DriverMixin(adam);adam.driveTo(‘Paris’);
  23. 23. Miért használjuk mégis?Miért használjuk mégis a prototype-ot? Ivett ViolaHatékonyság miatt.
  24. 24. 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)
  25. 25. Az a bizonyos this
  26. 26. No, ez mi?var globalScope = (function () { return (0, eval)(this);}());
  27. 27. No, ez mi?var globalScope = (function () { return (0, eval)(this);}()); Meghívható objektumra mutat
  28. 28. 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.”
  29. 29. Függvény, metódus function fn() {}var b = fn; obj.c = b;obj.getFn = function() { return fn; }fn(); b(); obj.c(); obj.getFn()();
  30. 30. Objektum, metódusok…Klasszikus objektum metódusokkal
  31. 31. Objektum, metódusok…JavaScript objektum „metódusokkal” * c fn obj* függvény típusú tulajdonságokkal
  32. 32. Objektum, metódusok…A valódi esetben a prototípusban van obj2 obj1 c fn
  33. 33. Program futási folyamatKlasszikus 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…
  34. 34. Program futási folyamatJavaScript program futási folyamat Sok kis apró, gyorsan lefutó függvény
  35. 35. Program futási folyamatJavaScript program futási folyamat doStufffunction doStuff() {1 doAsync(function(result) {34 parse(result);5 doAsync });2 parse}
  36. 36. 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……};
  37. 37. 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… obj.greetAll = function() { this.names.forEach(function() {…});};
  38. 38. Megoldási lehetőségek: this• Használjunk mindenhol this-t!• Nem működik. obj.greetAll = function() { this.names.forEach(function() {…});};
  39. 39. 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ó.obj.greetAll = function() { this.names.forEach(function() { // … }.bind(this));};
  40. 40. 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)obj.greetAll = function() { var _this = this; this.names.forEach(function() { /* itt _this kell */ });};
  41. 41. 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. obj.greetAll = function() { var _this = this; _this.names.forEach(function() { /* itt _this kell */ });};
  42. 42. 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;}
  43. 43. 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.
  44. 44. Kérdések?Farkas MátéBudapest.js, 2013. január 14.
  45. 45. LinksAz előadó: • http://farkas-mate.hu/ • http://virtual-call-center.eu/

×