Classi ed ereditarietà
La gestione delle classi in javascript è leggermente diversa da quella a cui siamo abituati negli altri linguaggi di programmazione. Javascript, NON è un linguaggio class-basedì bensì un linguaggio prototype-based.
I linguaggi prototype-based, a differenza di quelli class-based, non fanno distinzione fra classi e istanze.
Ciò comporta non pochi problemi nell'utilizzo e bisogna fare molta attenzione.
Definiamo una classe:
-
function Person() {
-
this.name = "";
-
this.age = 15;
-
}
-
-
Person.prototype.setName = function(newName){
-
this.name = newName;
-
}
-
-
Person.prototype.setAge = function(newAge){
-
this.age = newAge;
-
}
Abbiamo definito una classe MyClass con due campi (name e age) e due metodi (setName e setAge)
Ora deriviamo la nostra classe:
-
function Male() {
-
this.gender = 'M';
-
}
-
Male.prototype = new Person();
a questo punto utilizziamola:
-
var davide = new Male();
-
davide.setName("davide");
-
davide.setAge(35);
-
-
alert(davide.name+" "+davide.age+" "+davide.gender);
Il risultato attteso sarà un bel pop-up contenente la string "davide 35 M";
...se aggiungiamo...
-
var marco= new Male();
-
marco.setName("marco");
-
marco.setAge(22);
-
-
alert(marco.name+" "+marco.age+" "+marco.gender);
il nuovo pop-up ci restituirà "marco 22 M";
E fin qua nulla di nuovo, i problemi sorgono quando nei campi ci sono degli oggetti un po' più complessi della semplice stringa e che vengono aggiornati senza utilizzare l'assegnamento.
Quando si cerca di accedere al campo "nome" dell'oggetto di tipo "davide", viene verificata innanzitutto la presenza nella classe "Male", se non viene trovata si risale alla classe Person.
Nel momento stesso in cui viene fatto l'assegnamento, tramite la setName, non viene aggiornato il valore ma viene creata una nuova proprietà nell'oggetto "davide" creato.
L'effetto è molto più chiaro se utilizziamo un array.
Aggiungiamo alla nostra classe.
-
function Person() {
-
this.name = "";
-
this.age = 15;
-
-
this.preferredColors = new Array();
-
}
-
-
Person.prototype.addPreferredColor = function (color) {
-
this.preferredColors[this.preferredColors.length] = color;
-
}
-
-
Person.prototype.printColors = function() {
-
return ....Una stringa contenente la lista dei colori....
-
}
..ed utilizziamo la nuova funzionalità
-
...
-
davide.addPreferredColor('Giallo');
-
davide.addPreferredColor('Rosso');
-
-
marco.addPreferredColor('Nero');
-
-
alert(marco.printColors());
Quello che ci si aspetterebbe in output è "Nero"
invece l'output sarà "Giallo, Rosso, Nero"
Cos'è successo?
Nei due oggetti creati non era stata definita la proprietà "preferredColor" e quindi è stata utilizzata quella dell'oggetto "Person". In un linguaggio class-based non ci sarebbero stati problemi in quanto, essendo la classe separata dall'istanza, ogni oggetto avrebbe avuto il suo array. In javascript invece questa separazione non c'è e quindi la proprietò a cui accedono i due oggetti è lo stesso.
Come si risolve?
Semplice, l'inizializzazione della proprietà va fatta nelle classi derivate e non nella classe madre.
-
function Person() {
-
this.name = "";
-
this.age = 15;
-
}
-
-
function Male() {
-
this.gender = 'M';
-
this.preferredColors = new Array();
-
}
...mentre i metodi che lavorano con la proprietà in questione si possono tranquillamente lasciare nella classe madre.
Poco comodo, lo so, ma al momento è l'unico modo che ho trovato per farlo.