この例では "this"のコンテキストは何ですか？

Question

thisの2つの行が異なる値を作成するのはなぜですか？

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

最初の1つはファイルのURIで警告し、2番目の警告は「HTML段落要素」で警告します。つまり、2番目のコンテキストはDOM要素ですが、最初のコンテキストはメインコンテキストです。

私はこれに関する多くの研究を行いました。そのうちのいくつかは私の頭の上に少しあるので、誰かが答えを知っていれば、私のためにそれを黙らせることができますか？

Answer 1

インラインJavaScriptイベントでは、thisは、イベントがトリガーされた要素です。これらはいずれもonclickイベントであるため、クリックした要素はthisです。

alert()を使用すると、パラメータが文字列に変換されます。 <a>要素オブジェクトを文字列に変換すると、その値はhrefになります。 <p>要素を文字列に変換すると、toStringというカスタムを持たないので、[object HTMLParagraphElement]になります。

Revalentドキュメント：onclickイベントの場合https://developer.mozilla.org/en-US/docs/Web/API/URLUtils/toString

Answer 2

、this変数がクリックされたDOM要素にバインドされています。 javascriptの変数にalertを呼び出すと、実際にはtoString()が呼び出されます。アンカータグでtoString()が呼び出されると、実際にhref属性が返されます。段落タグに呼び出されると、それは単に[object objectName]を印刷しtoString()方法を内蔵しており、デフォルトの1が使用されている（1を持っていません。

Answer 3

をものがあることHTMLAnchorElement継承自然のHTMLElement（からメソッド）だけでなく、 URLUtilsインターフェイスのmethodsを実装しています。そのターンの後の、現在のhrefプロパティを返すメソッドtoStringを持っている。

あなたはalert何でも、それは引数のtoStringメソッドを呼び出し例えば、文字列型にそのarguemntをキャストするとき。あなたが見るしたがって行動。

HTMLParagraphEleme nt（<p>）にはこのプロパティがないため、toStringは単にデフォルトの文字列[object HTMLParagraphElement]を返します。