JavaScript Object Oriented

Sviluppo applicazioni web e linguaggio HTML

LEZIONE 03

OO
JAVASCRIPT

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

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 una
parentesi sulle
funzioni

un contesto di
esecuzione : this

un insieme di valori
passati come
parametri : arguments

un campo contenente
tutto il codice

variadic function
function sum( ) {
var total = 0;
var count = arguments.length;
for(var i = 0; i < count; i++) {
total += arguments[i];
}
return total;
}

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, 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 nella
quale la variabile è stata dichiarata

Accessibile da tutta
variabile globale l’applicazione

var zoccolo = ’80 millimetri’;

var altezza = function(comodino) {
var altezza_zoccolo = parseInt(zoccolo);
return comodino.altezza
+ altezza_zoccolo;
};

Accessibile solo
all’interno della funzione

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

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 a = 10

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


var value = 0;
var obj = { value : 5 };

};
inner();
return this.value;
};
Si riferisce all’oggetto
obj.add(3); 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;
}; parametri:
- nuovo contesto
obj.multiply(3); - array di argomenti

var value = 2;

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

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( );
}; In esecuzione il ritorno
di “a” da parte di bar()
avviene dopo la
function bar( ) { dichiarazione di “a”
return a; ma il risultato è …
};

foo(); // risultato: undefined
Lo scope di bar() al
momento della sua
definizione è globale

Le funzioni interne possono
accedere alle variabili e ai
parametri delle funzioni nelle
quali sono definite

global scope

var a = 14; foo scope a
function 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 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

// funzione con una callback come parametro
function foo(a, b, callback) {
var n = (a * b) + b;
callback(n);
} anonymous function

foo (5, 2, function(n) {
alert("callback result: " + n);
});

Chiusa la
parentesi sulle
funzioni

In JavaScript non esistono classi …
Il costruttore è una funzione

return this; // facoltativo
};
var comodino = new Comodino(‘Bianco’, 3);

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( );
var comodino2 = new Comodino( ); augmentation
Comodino.prototype.altezza = 400;
comodino1.altezza; // risultato: 400

OK, ma non voglio mica tutti gli oggetti
uguali!
…
Comodino.prototype.altezza = 400;
shadowing
comodino1.altezza = 300;
comodino1.altezza ; // risultato: 300

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

};

Comodino.prototype = {
constructor : Comodino,
altezza : 400
};

In JavaScript
esiste
l’ereditarietà ?

Interface inheritance NO

Implementation inheritance SI

Prototype Chaining
Classical Inheritance
Pseudoclassical Inheritance
Prototypal Inheritance

function Mobile( ) {
this.materiali = [ ‘Legno’ ];
}

function Comodino( ) {
this.colore = ‘Bianco’; prototype chaining
}

// Comodino eredita da Mobile
Comodino.prototype = new Mobile();

var comodino = new Comodino( );
comodino.materiali[0]; // risultato: “Legno”

Le proprietà impostate nel costruttore
diventano proprietà di prototipo e
quindi condivise
...
// Comodino eredita da Mobile
Comodino.prototype = new Mobile();
comodino1.materiali.push(‘Vetro’);
comodino1.materiali; // ”Legno, Vetro”

function Mobile( ) {
I metodi devono essere
this.materiali = [ ‘Legno’ ]; aggiunti sul costruttore
} base perché il prototipo
non è visibile dai sottotipi
function Comodino( ) {
this.colore = ‘Bianco’;
Mobile.call(this);
} constructor stealing

comodino2.materiali; // ”Legno”

La tecnica Pseudoclassical
Inheritance prende il meglio
dai due pattern precedenti,
utilizzando:

• prototype chaining per i
metodi
• constructor stealing per le
proprietà

Prototypal Inheritance
function object(o) { (2006, Douglas Crockford)
function F( ) { }
F.prototype = o;
return new F( );
}

var comodino1 = { materiali : [‘Legno’],
colore : ‘Bianco’ };
var comodino2 = object(comodino1);

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

Credits
Le immagini contenute in questa presentazione
hanno licenza Creative Commons

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

Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it

JavaScript Object Oriented

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Object Oriented

JavaScript Object Oriented