La creazione di oggetti in un linguaggio di programmazione è una pratica assolutamente fondamentale nella realizzazione di applicazioni complesse; ma come forma mentis aiuta farlo anche se costruite piccoli programmi di utilità.

In questo articolo discutiamo come creare tecnicamente un oggetto; tuttavia ben più importante è analizzare il problema e definire quali metodi e proprietà ed eventi debba avere questo oggetto per soddisfare al requisito di poter esistere indipendentemente dall'applicazione che lo usa.

In particolare, questo è indispensabile per effettuare sviluppo test-driven. Permette di raggiungere livelli di sicurezza notevoli; ma è anche il modo più facile per garantire che qualunque cosa riguardi l'oggetto non esce dai confini dell'oggetto; e quindi posso con tranquillità incorporare l'oggetto in progetti diversi, e aggiornarlo, senza dover cambiare altro codice fuori dall'oggetto.

Qui vogliamo concentrarci solo sulle differenze tra le funzioni che abbiamo creato nel passo 1, e la loro trasformazione in oggetto.

L'oggetto viene instanziato (creato) da

var msgBox = new _msgBox()

dove _msgBox() è una funzione normalissima all'interno della quale è possibile definire alcune proprietà usando l'oggetto this.

// --------------------- _msgBox --------------------------------
// L'oggetto _msgBox, che verrà istanziato nella variabile msgBox.
function _msgBox()
{
    // le proprietà dell'oggetto si definiscono usando la parola riservata this.
    this.divMsg;
    this.message = "";
    this.button1 = "Yes";
    this.button2 = "No";
    this.button1Result = true;
    this.button2Result = false;
}

Ho creato alcune proprietà che saranno utili più avanti.

Per quanto riguarda i metodi, benché sia possibile dichiararli in-line, è francamente molto più semplice e ordinato modificare il prototype dell'oggetto appena creato: quindi

// Le funzioni invece si definiscono più comodamente con prototype.
_msgBox.prototype.ask = function (msgHTML)
{
    this.divMsg = document.getElementById("msgbox")
    this.button1 = "Yes";
    this.button2 = "No";
    this.button1Result = true;
    this.button2Result = false;
    this.divMsg.firstChild.innerHTML = msgHTML;
    this.divMsg.style.display = "block"
}

A questo punto sarà possibile invocare la nuova funzione (l'oggetto è già istanziato): quindi

<a href="#" onclick="javascript:msgBox.ask('dormi?')">dormi?</a><br>