JavaScript Object Oriented

OO JAVASCRIPT

Sviluppo applicazioni web e linguaggio HTML

LEZIONE 03

JavaScript? E’ un linguaggio di

scripting Object-Oriented

interpretato da un

browser web

Tutto in JavaScript è un

oggetto, ovvero una

rappresentazione

di un concetto o di

una entità del

mondo reale

sotto forma di

dati + azioni

…

var comodino = new Object();

comodino.cassetti = 3;

comodino.colore = ‘Bianco’;

comodino.altezza = 400; // in millimetri

comodino.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

JSON

var comodino = {

“cassetti” : 3, “colore” : “Bianco”,

“misure” : [

{ “altezza” : 400 },

{ “larghezza” : 500 }, { “profondità” : 400 }

]

}

… ma per oggetto si intende forse

istanza di una

classe?

Classi!? In JavaScript non esistono

function Comodino(colore, cassetti) {

this.colore = colore;

this.cassetti = cassetti;

return this; // facoltativo

};

var comodino = new Comodino(‘Bianco’, 3);

Il costruttore è una funzione

Apriamo una

parentesi sulle

funzioni

Le funzioni sono oggetti

un contesto di

esecuzione : this

un insieme di valori

passati come

parametri : arguments

un campo contenente

tutto il codice

function sum( ) {

var total = 0;

var count = arguments.length;

for(var i = 0; i < count; i++) {

total += arguments[i];

}

return total;

}

variadic function

sum( ); // risultato: 0

sum(1, 2, 3, 5, 6, 7); // risultato: 24

Una funzione assegnata

alla proprietà di un

oggetto è un metodo

var comodino = {

cassetti : 3,

colore : ‘Bianco’,

altezza : 400,

larghezza : 500,

‘profondità’ : 400,

dimensioni : function( ){

return this.larghezza + ‘x’ + this.altezza

+ ‘x’ + this[‘profondità’] + ‘ mm’;

}

}

anonymous function

…

comodino.dimensioni( );

// risultato: 500x400x400 mm

Lo scope di una variabile è

limitato alla funzione nella

quale la variabile è stata dichiarata

var zoccolo = ’80 millimetri’;

var altezza = function(comodino) {

var altezza_zoccolo = parseInt(zoccolo);

return comodino.altezza

+ altezza_zoccolo;

};

variabile globale Accessibile da tutta

l’applicazione

var zoccolo = ’80 millimetri’;

var altezza = function(comodino) {

var altezza_zoccolo = parseInt(zoccolo);

return comodino.altezza

+ altezza_zoccolo;

};

variabile locale

Accessibile solo

all’interno della funzione

function foo( ) {

if ( true) {

var zoccolo = ‘80 millimetri’;

}

alert(zoccolo);

};

foo( );

Accessibile solo

all’interno della funzione

il contesto

di esecuzione di una funzione

dipende dal

tipo di chiamata

Se la funzione è chiamata

come metodo, il contesto è

l’oggetto al quale appartiene

var comodino = {

…

dimensioni : function( ){

return this.larghezza + ‘x’ + this.altezza

+ ‘x’ + this[‘profondità’] + ‘ mm’;

}

}

Se la funzione viene definita

globalmente a livello di

applicazione, il contesto è

l’oggetto globale (window)

var a = 1;

var b = 2;

var c = sum(this.a, this.b);

Per una funzione interna il

contesto è quello della

funzione esterna

var a = 5;

var foo = function( ) {

var a = 0;

var f = function(b){

a += b;

};

f(5);

return a;

};

foo(); // risultato: 5

var a = 5;

var foo = function( ) {

var a = 0;

var f = function(b){

this.a += b;

};

f(5);

return a;

};


a = 10

Cosa succede se chiamiamo una funzione

globale 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);

Qual è il risultato

di obj.add(3)?



var value = 0;





};

inner();

return this.value;

};

obj.add(3);

Si riferisce all’oggetto

globale



var value = 0;





};

inner();

return this.value;

};

obj.add(3);

Si riferisce all’oggetto

globale

Creo una variabile that nel metodo esterno per

passare alla funzione globale il contesto locale

var value = 0;



var that = this;


that.value = sum(that.value, a);

};

inner();

return this.value;

};

obj.add(3);

E se volessimo cambiare il

contesto di esecuzione? Con

il metodo apply si può!


obj.multiply = function(a){

return this.value * a;

};

obj.multiply(3);

var value = 2;

obj.multiply.apply(this, [3]);

parametri:

- nuovo contesto

- array di argomenti

Cosa succede se nel creare un oggetto mi

dimentico 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 mi

dimentico 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 una

funzione viene determinato al

momento della sua definizione e

non quando questa viene eseguita

function foo( ) {

var a = 123;

bar( );

};

function bar( ) {

return a;

};

foo(); // risultato: undefined

In esecuzione il ritorno

di “a” da parte di bar()

avviene dopo la dichiarazione di “a”

ma il risultato è …

Lo scope di bar() al

momento della sua definizione è globale

function foo( ) {

var a = 123;

bar( );

};

function bar( ) {

return a;

};

foo(); // risultato: undefined

function foo( ) {

var a = 123;

var bar = function( ) {

return a;

};

return bar();

};


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

var a = 14;

function foo( ) {

var b = 10;

function bar( ) {

var c = 3;

alert(a+b+c);

};

bar( );

};

foo(); // mostra 27

c

b

a

bar scope

foo scope

global scope

“A closure is formed when one of

those inner functions is made

accessible outside of the function in

which it was contained, so that it

may be executed after the outer

function 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;

};

}

return array;

};

var a = foo( );

a[0]( ); // risultato: 3



La funzione anonima

mantiene un riferimento allo

scope del parent

Le tre funzioni puntano

entrambe al valore di “i” terminata l’esecuzione di 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 );

}

return array;

};

var a = foo( );




La funzione anonima

accetta “i“ come parametro

Adesso ogni funzione ha

“i” nel suo scope con il valore i-esimo del loop

// funzione con una callback come parametro

function foo(a, b, callback) {

var n = (a * b) + b;

callback(n);

}

foo (5, 2, function(n) {

alert("callback result: " + n);

});

anonymous function

Chiusa la

parentesi sulle

funzioni

In JavaScript non esistono classi …




return this; // facoltativo

};

var comodino = new Comodino(‘Bianco’, 3);

Il costruttore è una funzione

Ogni funzione ha una proprietà

prototype che è il prototipo degli

oggetti creati con quella funzione

typeof Comodino.prototype // risultato: object

Il prototipo mantiene in una proprietà

constructor il riferimento alla funzione

che lo ha generato

typeof Comodino.prototype.constructor

// risultato: Function

Comodino.prototype.constructor

// risultato: Comodino( )

Invece che inizializzare gli oggetti nel

costruttore 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 prototipo

si riflette su tutti gli oggetti creati con

quel prototipo

function Comodino( ) { };

Comodino.prototype.cassetti = 3;

Comodino.prototype.colore = ‘Bianco’;

var comodino1 = new Comodino( );


Comodino.prototype.altezza = 400;

comodino1.altezza; // risultato: 400


augmentation

OK, ma non voglio mica tutti gli oggetti

uguali!

…

Comodino.prototype.altezza = 400;



comodino1.altezza = 300;

comodino1.altezza ; // risultato: 300


comodino1.hasOwnProperty(‘altezza’); // true

comodino1.hasOwnProperty(‘altezza’); // false

shadowing




};

Comodino.prototype = {

constructor : Comodino,

altezza : 400

};

In JavaScript esiste

l’ereditarietà?

Interface inheritance

Implementation inheritance

NO

SI

Prototype Chaining

Classical Inheritance

Pseudoclassical Inheritance

Prototypal Inheritance

Prototype Chaining




function Mobile( ) {

this.materiali = [ ‘Legno’ ];

}

function Comodino( ) {

this.colore = ‘Bianco’;

}

// Comodino eredita da Mobile

Comodino.prototype = new Mobile();

var comodino = new Comodino( );

comodino.materiali[0]; // risultato: “Legno”

prototype chaining

...

// Comodino eredita da Mobile

Comodino.prototype = new Mobile();



comodino1.materiali.push(‘Vetro’);

comodino1.materiali; // ”Legno, Vetro”


Le proprietà impostate nel costruttore

diventano proprietà di prototipo e

quindi condivise

Prototype Chaining




function Mobile( ) {


}

function Comodino( ) {

this.colore = ‘Bianco’;

Mobile.call(this);

}





comodino2.materiali; // ”Legno”

constructor stealing

I metodi devono essere

aggiunti sul costruttore base perché il prototipo non è visibile dai sottotipi

Prototype Chaining




La tecnica Pseudoclassical

Inheritance prende il meglio

dai due pattern precedenti,

utilizzando:

• prototype chaining per i

metodi

• constructor stealing per le

proprietà

function Mobile( prezzo ) {


this.prezzo = prezzo;

}

Mobile.prototype.sconto = function( percentuale ) {

return this.prezzo * percentuale / 100;

};

function Comodino( prezzo, colore ) {

// eredita le proprietà

Mobile.call(this, prezzo);


}

// eredita i metodi

Comodino.prototype = new Mobile ();

Prototype Chaining




function object(o) {

function F( ) { }

F.prototype = o;

return new F( );

}

var comodino1 = { materiali : [‘Legno’],

colore : ‘Bianco’ };

var comodino2 = object(comodino1);


comodino1.materiali; // “Legno”, “Vetro”


(2006, Douglas Crockford)

Slide 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

Credits Le immagini contenute in questa presentazione

hanno licenza Creative Commons

Thank You

MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: [email protected]

Technology

JavaScript Object Oriented