• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Object Oriented
 

JavaScript Object Oriented

on

  • 974 views

Continuando a parlare di JavaScript ...

Continuando a parlare di JavaScript ...

Statistics

Views

Total Views
974
Views on SlideShare
973
Embed Views
1

Actions

Likes
0
Downloads
50
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Object Oriented JavaScript Object Oriented Presentation Transcript

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