Qual è il contesto di "questo" in questo esempio?

Question

Perché queste due righe creano valori diversi per this?

<div> 
    <a href="#" id= "li2" onclick="alert(this)"> a link </a> 
</div> 
<p id= "p2" onclick="alert(this)"> a paragraph </p> 

I primi uno avvisi con URI del file, gli avvisi seconda con il "HTML Paragrafo Element". In altre parole, il secondo contesto è l'elemento DOM, ma il primo è il contesto principale.

Ho fatto un sacco di ricerche su questo, e alcuni di loro sono un po 'sopra la mia testa, quindi se qualcuno conosce la risposta, puoi dumbelo giù per me?

Answer 1

In eventi JavaScript in linea, this è elemento in cui è stato attivato l'evento. Questi sono entrambi gli eventi onclick, quindi this è l'elemento su cui hai fatto clic.

Quando si utilizza alert(), converte i suoi parametri in una stringa. Quando si converte un oggetto elemento <a> in una stringa, si ottiene il valore href. Quando si converte un elemento <p> in una stringa, si ottiene [object HTMLParagraphElement] poiché non ha un numero personalizzato toString.

docs Revalent: https://developer.mozilla.org/en-US/docs/Web/API/URLUtils/toString

Answer 2

Per onclick eventi, la variabile this è legata all'elemento DOM viene cliccato. Quando chiami alert su variabili in javascript, in realtà chiama toString(). Quando si chiama toString() su un tag di ancoraggio, l'attributo href viene effettivamente restituito. Quando viene chiamato il tag di paragrafo, non ha un built-in toString() metodo e quello di default viene utilizzato (quello che consente di stampare semplicemente [object objectName].

Answer 3

Il fatto è che HTMLAnchorElement metodi eredita da HTMLElement (naturalmente), così come implementa methods dell'interfaccia URLUtils. Più tardi, a sua volta ha il metodo toString che restituisce attuale proprietà href.

Quando si alert nulla che proietta la sua arguemnt di tipo stringa, ad esempio chiamando il metodo toString dell'argomento. da qui il comportamento che si vede.

HTMLParagraphEleme nt (<p>) non ha questa proprietà e quindi toString restituisce semplicemente la stringa predefinita [object HTMLParagraphElement].