JavaScript Object Oriented

966
-1

Published on

Continuando a parlare di JavaScript ...

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
966
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Object Oriented

  1. 1. Sviluppo applicazioni web e linguaggio HTML LEZIONE 03 OOJAVASCRIPT
  2. 2. JavaScript? E’ un linguaggio discripting Object-Oriented interpretato da un browser web
  3. 3. Tutto in JavaScript è unoggetto,ovvero unarappresentazionedi un concetto o diuna entità delmondo realesotto forma didati + azioni
  4. 4. …var comodino = new Object();comodino.cassetti = 3;comodino.colore = ‘Bianco’;comodino.altezza = 400; // in millimetricomodino.larghezza = 500;comodino[‘profondità’] = 400;…
  5. 5. …var comodino = { cassetti : 3, colore : ‘Bianco’, altezza : 400, larghezza : 500, ‘profondità’ : 400}… Notazione letterale
  6. 6. var a = [ ];typeof a; // risultato: "object“var misc = [ 3, ‘Bianco’, 400, 500, 400 ];misc.length; // risultato: 5
  7. 7. var comodino = { “cassetti” : 3, “colore” : “Bianco”, “misure” : [ { “altezza” : 400 }, JSON { “larghezza” : 500 }, { “profondità” : 400 } ]}
  8. 8. … ma per oggetto si intende forse istanza di una classe?
  9. 9. Classi!? In JavaScript non esistono Il costruttore è una funzione function Comodino(colore, cassetti) { this.colore = colore; this.cassetti = cassetti; return this; // facoltativo }; var comodino = new Comodino(‘Bianco’, 3);
  10. 10. Apriamo unaparentesi sullefunzioni
  11. 11. Le funzioni sono oggetti
  12. 12. un contesto diesecuzione : thisun insieme di valoripassati comeparametri : argumentsun campo contenentetutto il codice
  13. 13. variadic functionfunction sum( ) { var total = 0; var count = arguments.length; for(var i = 0; i < count; i++) { total += arguments[i]; } return total;}
  14. 14. sum( ); // risultato: 0sum(1, 2, 3, 5, 6, 7); // risultato: 24
  15. 15. Una funzione assegnata alla proprietà di unoggetto è un metodo
  16. 16. var comodino = { cassetti : 3, colore : ‘Bianco’, altezza : 400, larghezza : 500, anonymous function ‘profondità’ : 400, dimensioni : function( ){ return this.larghezza + ‘x’ + this.altezza + ‘x’ + this[‘profondità’] + ‘ mm’; }}
  17. 17. …comodino.dimensioni( );// risultato: 500x400x400 mm
  18. 18. Lo scope di una variabile èlimitato alla funzione nellaquale la variabile è stata dichiarata
  19. 19. Accessibile da tutta variabile globale l’applicazionevar zoccolo = ’80 millimetri’;var altezza = function(comodino) { var altezza_zoccolo = parseInt(zoccolo); return comodino.altezza + altezza_zoccolo;};
  20. 20. Accessibile solo all’interno della funzionevar zoccolo = ’80 millimetri’;var altezza = function(comodino) { var altezza_zoccolo = parseInt(zoccolo); return comodino.altezza + altezza_zoccolo;}; variabile locale
  21. 21. Accessibile solo all’interno della funzionefunction foo( ) { if ( true) { var zoccolo = ‘80 millimetri’; } alert(zoccolo);};foo( );
  22. 22. il contestodi esecuzionedi una funzionedipende daltipo di chiamata
  23. 23. Se la funzione è chiamatacome metodo, il contesto èl’oggetto al quale appartienevar comodino = { … dimensioni : function( ){ return this.larghezza + ‘x’ + this.altezza + ‘x’ + this[‘profondità’] + ‘ mm’; }}
  24. 24. Se la funzione viene definitaglobalmente a livello diapplicazione, il contesto èl’oggetto globale (window)var a = 1;var b = 2;var c = sum(this.a, this.b);
  25. 25. Per una funzione interna ilcontesto è quello dellafunzione esterna a = 10var a = 5; var a = 5;var foo = function( ) { var foo = function( ) { var a = 0; var a = 0; var f = function(b){ var f = function(b){ a += b; this.a += b; }; }; f(5); f(5); return a; return a;}; };foo(); // risultato: 5 foo(); // risultato: 0
  26. 26. Cosa succede se chiamiamo una funzioneglobale all’interno di una funzione interna?var value = 0;var obj = { value : 5 }; Qual è il risultato di obj.add(3)?obj.add = function (a) { var inner = function (){ this.value = sum(this.value, a); }; inner(); return this.value;};obj.add(3);
  27. 27. Cosa succede se chiamiamo una funzioneglobale all’interno di una funzione interna?var value = 0;var obj = { value : 5 };obj.add = function (a) { var inner = function (){ this.value = sum(this.value, a); }; inner(); return this.value;}; Si riferisce all’oggettoobj.add(3); globale
  28. 28. Cosa succede se chiamiamo una funzioneglobale all’interno di una funzione interna?var value = 0;var obj = { value : 5 };obj.add = function (a) { var inner = function (){ this.value = sum(this.value, a); }; inner(); return this.value;};obj.add(3); Si riferisce all’oggetto globale
  29. 29. Creo una variabile that nel metodo esterno perpassare alla funzione globale il contesto localevar value = 0;var obj = { value : 5 };obj.add = function (a) { var that = this; var inner = function (){ that.value = sum(that.value, a); }; inner(); return this.value;};obj.add(3);
  30. 30. E se volessimo cambiare ilcontesto di esecuzione? Conil metodo apply si può!var obj = { value : 5 };obj.multiply = function(a){ return this.value * a;}; parametri: - nuovo contestoobj.multiply(3); - array di argomentivar value = 2;obj.multiply.apply(this, [3]);
  31. 31. Cosa succede se nel creare un oggetto midimentico della parola chiave new?var value = 0;function Obj(value){ this.value = value;};var obj = Obj(5);obj.value = 10; Quale valore ho modificato?
  32. 32. Cosa succede se nel creare un oggetto midimentico della parola chiave new?var value = 0;function Obj(value){ this.value = value;};var obj = Obj(5);obj.value = 10; Quale valore ho modificato?
  33. 33. Lo scope delle variabili di unafunzione viene determinato almomento della sua definizione enon quando questa viene eseguita
  34. 34. function foo( ) { var a = 123; bar( );}; In esecuzione il ritorno di “a” da parte di bar() avviene dopo lafunction bar( ) { dichiarazione di “a” return a; ma il risultato è …};foo(); // risultato: undefined Lo scope di bar() al momento della sua definizione è globale
  35. 35. function foo( ) { function foo( ) { var a = 123; var a = 123; bar( ); var bar = function( ) {}; return a; };function bar( ) { return bar(); return a; };}; foo(); // risultato: 123foo(); // risultato: undefined Lo scope di bar() al momento della sua definizione è lo stesso di foo()
  36. 36. Le funzioni interne possono accedere alle variabili e ai parametri delle funzioni nelle quali sono definite
  37. 37. global scopevar a = 14; foo scope afunction foo( ) { var b = 10; bar scope b function bar( ) { var c = 3; c alert(a+b+c); }; bar( );};foo(); // mostra 27
  38. 38. “A closure is formed when one ofthose inner functions is madeaccessible outside of the function inwhich it was contained, so that itmay be executed after the outerfunction has returned.”http://jibbering.com/faq/notes/closures/
  39. 39. var obj = function ( ) { var value = 1; return { add : function (a) { value += a; }, getValue : function ( ) { return value; } }}( );obj.add(5);obj.getValue(); // risultato: 6
  40. 40. function foo(arg) { var bar = function(){ return arg; }; arg++; return bar;};var bar = foo(5);bar(); // risultato: 6
  41. 41. function foo( ) { var i, array = [ ]; for(i = 0; i < 3; i++) { array[ i ] = function( ) { return i; }; La funzione anonima } mantiene un riferimento allo return array; scope del parent};var a = foo( ); Le tre funzioni puntanoa[0]( ); // risultato: 3 entrambe al valore di “i”a[1]( ); // risultato: 3 terminata l’esecuzione dia[2]( ); // risultato: 3 foo e quindi del loop
  42. 42. function foo( ) { var i, array = [ ]; for(i = 0; i < 3; i++) { array[ i ] = ( function( j ) { return function( ) { return j; } })( i ); } La funzione anonima return array; accetta “i“ come parametro};var a = foo( );a[0]( ); // risultato: 0 Adesso ogni funzione haa[1]( ); // risultato: 1 “i” nel suo scope con ila[2]( ); // risultato: 2 valore i-esimo del loop
  43. 43. // funzione con una callback come parametrofunction foo(a, b, callback) { var n = (a * b) + b; callback(n);} anonymous functionfoo (5, 2, function(n) { alert("callback result: " + n);});
  44. 44. Chiusa laparentesi sullefunzioni
  45. 45. In JavaScript non esistono classi … Il costruttore è una funzione function Comodino(colore, cassetti) { this.colore = colore; this.cassetti = cassetti; return this; // facoltativo }; var comodino = new Comodino(‘Bianco’, 3);
  46. 46. Ogni funzione ha una proprietàprototype che è il prototipo deglioggetti creati con quella funzionetypeof Comodino.prototype // risultato: object
  47. 47. Il prototipo mantiene in una proprietàconstructor il riferimento alla funzioneche lo ha generatotypeof Comodino.prototype.constructor// risultato: FunctionComodino.prototype.constructor// risultato: Comodino( )
  48. 48. Invece che inizializzare gli oggetti nelcostruttore lo posso fare con il prototype function Comodino( ) { }; Comodino.prototype.cassetti = 3; Comodino.prototype.colore = ‘Bianco’; … var comodino = new Comodino( ); comodino.cassetti // risultato: 3 Comodino.prototype.isProtoypeOf(comodino); // true
  49. 49. L’aggiunta di una proprietà nel prototiposi riflette su tutti gli oggetti creati conquel prototipo function Comodino( ) { }; Comodino.prototype.cassetti = 3; Comodino.prototype.colore = ‘Bianco’; var comodino1 = new Comodino( ); var comodino2 = new Comodino( ); augmentation Comodino.prototype.altezza = 400; comodino1.altezza; // risultato: 400 comodino2.altezza; // risultato: 400
  50. 50. OK, ma non voglio mica tutti gli oggettiuguali! … Comodino.prototype.altezza = 400; comodino1.altezza; // risultato: 400 comodino2.altezza; // risultato: 400 shadowing comodino1.altezza = 300; comodino1.altezza ; // risultato: 300 comodino2.altezza; // risultato: 400 comodino1.hasOwnProperty(‘altezza’); // true comodino1.hasOwnProperty(‘altezza’); // false
  51. 51. function Comodino(colore, cassetti) { this.colore = colore; this.cassetti = cassetti;};Comodino.prototype = { constructor : Comodino, altezza : 400};
  52. 52. In JavaScript esistel’ereditarietà ?
  53. 53. Interface inheritance NOImplementation inheritance SI
  54. 54. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  55. 55. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  56. 56. function Mobile( ) { this.materiali = [ ‘Legno’ ];}function Comodino( ) { this.colore = ‘Bianco’; prototype chaining}// Comodino eredita da MobileComodino.prototype = new Mobile();var comodino = new Comodino( );comodino.materiali[0]; // risultato: “Legno”
  57. 57. Le proprietà impostate nel costruttorediventano proprietà di prototipo equindi condivise...// Comodino eredita da MobileComodino.prototype = new Mobile();var comodino1 = new Comodino( );var comodino2 = new Comodino( );comodino1.materiali.push(‘Vetro’);comodino1.materiali; // ”Legno, Vetro”comodino2.materiali; // ”Legno, Vetro”
  58. 58. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  59. 59. function Mobile( ) { I metodi devono essere this.materiali = [ ‘Legno’ ]; aggiunti sul costruttore} base perché il prototipo non è visibile dai sottotipifunction Comodino( ) { this.colore = ‘Bianco’; Mobile.call(this);} constructor stealingvar comodino1 = new Comodino( );var comodino2 = new Comodino( );comodino1.materiali.push(‘Vetro’);comodino1.materiali; // ”Legno, Vetro”comodino2.materiali; // ”Legno”
  60. 60. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  61. 61. La tecnica PseudoclassicalInheritance prende il megliodai due pattern precedenti,utilizzando: • prototype chaining per i metodi • constructor stealing per le proprietà
  62. 62. function Mobile( prezzo ) { this.materiali = [ ‘Legno’ ]; this.prezzo = prezzo;}Mobile.prototype.sconto = function( percentuale ) { return this.prezzo * percentuale / 100;};function Comodino( prezzo, colore ) { // eredita le proprietà Mobile.call(this, prezzo); this.colore = colore;}// eredita i metodiComodino.prototype = new Mobile ();
  63. 63. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  64. 64. Prototypal Inheritancefunction object(o) { (2006, Douglas Crockford) function F( ) { } F.prototype = o; return new F( );}var comodino1 = { materiali : [‘Legno’], colore : ‘Bianco’ };var comodino2 = object(comodino1);comodino2.materiali.push(‘Vetro’);comodino1.materiali; // “Legno”, “Vetro”
  65. 65. CreditsLe immagini contenute in questa presentazionehanno licenza Creative CommonsSlide 3: http://www.flickr.com/photos/52701968@N00/14954425/Slide 22: http://www.flickr.com/photos/msutherland1/2372319292/in/photostream/Slide 53 : http://www.flickr.com/photos/pardeshi/1514977212
  66. 66. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×