Le funzioni Javascript ( 3 ): la keyword THIS | OTHER chapters | |||
La parola chiave
per manipolare il documento stesso oppure per estarrre gli elementi figli del documento, che sono i vari elementi di una pagina web." ( Introduzione al DOM (Document Object Model) ). Nella gerarchia DOM, quindi, il primo oggetto di una pagina web è la finestra ( window ): "L'oggetto window rappresenta una finestra contenente un document DOM; la proprietà ( dell'oggetto window ) document punta al documento DOM caricato in quella finestra ( la pagina web )" ( L'oggetto
se eseguita nel contesto ( scope ) globale dello script, restituisce sempre true, poichè l'oggetto window, per un browser web, è sempre l'oggetto globale. Per eseguire questa istruzione ed ottenere true è necessario inserire l'istruzione nella pagina web e caricare la pagina. Se invece annidiamo questa istruzione in un bottone web ( un oggetto figlio del'oggetto window ), ci vedremo restituire il valore false. Questo accade perchè l'oggetto a cui è riferito this non è più window, ma il bottone HTML.
La regola generale è che, all'interno di una funzione ( quindi, in un contesto, o scope, definito da un blocco di codice annidato nello scope globale ), la parola chiave
definisco una proprietà ( onClick ) di un oggetto HTML ( nel nostro caso, il bottone HTML ), di cui la funzione da eseguire ( alert() ) diventa un metodo. Per sapere a quale oggetto punta il this nel contesto in cui ci troviamo, è sufficiente eseguire il codice:
che, nel caso venga eseguito nel contesto globale, restituirà:
mentre se inserito in un bottone web, restituirà:
Quando conosco l'oggetto al quale punta il this, conosco i metodi e gli attributi che ho a disposizione per quel this. In un contesto globale, per esempio, eseguire l'istruzione seguente:
restituisce sempre true, poichè l'oggetto DOM document corrente ( siamo nel contesto globale ) corrisponde al document caricato nella window corrente. "L'interfaccia Document rappresenta una pagina web caricata nel browser ed è il punto di accesso all'intero contenuto della pagina, la struttura ad albero DOM, che include elementi quali il body o la table ( The
eseguito al caricamento della pagina web, imposterà il colore di sfondo della pagina stessa sul rosso ( la pagina web avrà lo sfondo rosso ), mentre, se eseguito all'interno di un bottone web:
restituirà un errore, poichè l'oggetto document non è una proprietà dell'oggetto HTMLInputElement ( il bottone HTML ). Una delle proprietà di un bottone web ( HTMLInputElement ) è il testo pubblicato all'interno del bottone, che, quindi, può essere modificato con un nuovo metodo:
Premete il bottone e vedrete il testo contenuto nel bottone cambiare. Attenzione: nel caso di un evento ( quale onClick ), è bene ricordare le osservazioni di Peter-Paul Koch, nella sua pagina The
e scopriremo che, premendo il bottone this, non succede assolutamente nulla! Questo accade perchè nella registrazione dell'evento onClick non viene copiata l'intera funzione da eseguire, ma viene semplicemente salvato un riferimento alla funzione. "La proprietà onclick non contiene la funzione, ma solo una chiamata alla funzione:
Come dire: 'Vai alla funzione go() ed eseguila'. Quando arriviamo alla funzione go(), la parola chiave this è riferita, ancora una volta, all'oggetto globale window: ecco perchè viene restituito un messaggio di errore" ( The
Per quanto riguarda il comportamento di this all'interno di una funzione, nella maggior parte dei casi, il valore di this è determinato da come la funzione viene invocata (chiamata). Nel caso di una chiamata semplice:
la condizione:
è vera, poichè this, non essendo impostato dalla chiamata, viene impostato di default sull'oggetto globale. È sufficiente passare in strict mode, per far si che this assuma valore locale:
In strict mode, il valore di this rimane impostato sul valore definito al momento dell'ingresso nel contesto di esecuzione. Se non viene definito alcun valore, this resta undefined. Nel nostro ultimo esempio, quindi, l'alert dovrebbe restituire true, perchè f2() viene invocata senza specificare alcuna base, quale, per esempio:
In questo caso, infatti, l'alert dovrebbe restituire false, poichè this, in questo caso, rappresenta l'oggetto window. Alcuni browser restituiscono l'oggetto window comunque, anche in assenza di una qualsiasi base. Questo accade perchè questi browser non hanno implementato l'orientamento verso l'undefined, quando hanno deciso di supportare lo strict mode. Come risultato, questi browser restituiscono sempre, in modo non corretto, l'oggetto window. Quando una funzione viene invocata come metodo di un oggetto, il this, all'interno della funzione, viene impostato sull'oggetto di cui la funzione è metodo:
In questo esempio, la funzione f, metodo dell'oggetto o, deve restituire il valore di prop, attributo dell'oggetto o: 37.
L'associazione di this è fondata esclusivamente sul membro più vicino:
In questo caso, l'alert restituirà prima 37, poi 42, che è il valore dell'attributo prop dell'oggetto o.b, proprietà dell'oggetto o.
|
||||
Le funzioni Javascript ( 3 ): la keyword THIS | The .bit guides: original contents |