Your SlideShare is downloading. ×
JavaScript Object Oriented
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Object Oriented

864

Published on

Continuando a parlare di JavaScript ...

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
864
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sviluppo applicazioni web e linguaggio HTML LEZIONE 03 OOJAVASCRIPT
  • 2. JavaScript? E’ un linguaggio discripting Object-Oriented interpretato da un browser web
  • 3. Tutto in JavaScript è unoggetto,ovvero unarappresentazionedi un concetto o diuna entità delmondo realesotto forma didati + azioni
  • 4. …var comodino = new Object();comodino.cassetti = 3;comodino.colore = ‘Bianco’;comodino.altezza = 400; // in millimetricomodino.larghezza = 500;comodino[‘profondità’] = 400;…
  • 5. …var comodino = { cassetti : 3, colore : ‘Bianco’, altezza : 400, larghezza : 500, ‘profondità’ : 400}… Notazione letterale
  • 6. var a = [ ];typeof a; // risultato: "object“var misc = [ 3, ‘Bianco’, 400, 500, 400 ];misc.length; // risultato: 5
  • 7. var comodino = { “cassetti” : 3, “colore” : “Bianco”, “misure” : [ { “altezza” : 400 }, JSON { “larghezza” : 500 }, { “profondità” : 400 } ]}
  • 8. … ma per oggetto si intende forse istanza di una classe?
  • 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. Apriamo unaparentesi sullefunzioni
  • 11. Le funzioni sono oggetti
  • 12. un contesto diesecuzione : thisun insieme di valoripassati comeparametri : argumentsun campo contenentetutto il codice
  • 13. variadic functionfunction sum( ) { var total = 0; var count = arguments.length; for(var i = 0; i < count; i++) { total += arguments[i]; } return total;}
  • 14. sum( ); // risultato: 0sum(1, 2, 3, 5, 6, 7); // risultato: 24
  • 15. Una funzione assegnata alla proprietà di unoggetto è un metodo
  • 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. …comodino.dimensioni( );// risultato: 500x400x400 mm
  • 18. Lo scope di una variabile èlimitato alla funzione nellaquale la variabile è stata dichiarata
  • 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. 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. Accessibile solo all’interno della funzionefunction foo( ) { if ( true) { var zoccolo = ‘80 millimetri’; } alert(zoccolo);};foo( );
  • 22. il contestodi esecuzionedi una funzionedipende daltipo di chiamata
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Lo scope delle variabili di unafunzione viene determinato almomento della sua definizione enon quando questa viene eseguita
  • 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. 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. Le funzioni interne possono accedere alle variabili e ai parametri delle funzioni nelle quali sono definite
  • 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. “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. var obj = function ( ) { var value = 1; return { add : function (a) { value += a; }, getValue : function ( ) { return value; } }}( );obj.add(5);obj.getValue(); // risultato: 6
  • 40. function foo(arg) { var bar = function(){ return arg; }; arg++; return bar;};var bar = foo(5);bar(); // risultato: 6
  • 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. 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. // 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. Chiusa laparentesi sullefunzioni
  • 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. Ogni funzione ha una proprietàprototype che è il prototipo deglioggetti creati con quella funzionetypeof Comodino.prototype // risultato: object
  • 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. 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. 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. 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. function Comodino(colore, cassetti) { this.colore = colore; this.cassetti = cassetti;};Comodino.prototype = { constructor : Comodino, altezza : 400};
  • 52. In JavaScript esistel’ereditarietà ?
  • 53. Interface inheritance NOImplementation inheritance SI
  • 54. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  • 55. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  • 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. 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. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  • 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. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  • 61. La tecnica PseudoclassicalInheritance prende il megliodai due pattern precedenti,utilizzando: • prototype chaining per i metodi • constructor stealing per le proprietà
  • 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. Prototype ChainingClassical InheritancePseudoclassical InheritancePrototypal Inheritance
  • 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. 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. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

×