Каков контекст "this" в этом примере?

Почему эти две строки создают разные значения для this?

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

Первый предупреждает о URI файла, второй предупреждает о "элементе абзаца HTML". Другими словами, второй контекст - это элемент DOM, но первый - основной контекст.

Я провел много исследований по этому вопросу, и некоторые из них немного над моей головой, поэтому, если кто-то знает ответ, можете ли вы опустить его для меня?

Ответ 1

В встроенных событиях JavaScript this - это элемент, в который было инициировано событие. Это события onclick, поэтому this - это элемент, на который вы нажали.

Когда вы используете alert(), он преобразует свои параметры в строку. Когда вы конвертируете объект элемента <a> в строку, вы получаете его значение href. Когда вы преобразовываете элемент <p> в строку, вы просто получаете [object HTMLParagraphElement], так как у него нет пользовательского toString.

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

Ответ 2

При событиях onclick переменная this привязана к щелчку элемента DOM. Когда вы вызываете alert для переменных в javascript, он на самом деле вызывает toString(). Когда toString() вызывается в теге привязки, атрибут href фактически возвращается. При вызове тега абзаца он не имеет встроенного метода toString() и используется по умолчанию (тот, который просто печатает [object objectName].

Ответ 3

Дело в том, что HTMLAnchorElement наследует методы из HTMLElement (естественно), а также реализует methods интерфейса URLUtils. В свою очередь, в свою очередь, есть метод toString, который возвращает текущее свойство href.

Когда вы alert что-либо, он передает свой аргумент в тип строки, например. вызывая метод toString аргумента. Следовательно, поведение, которое вы видите.

HTMLParagraphElement (<p>) не имеет этих свойств и, следовательно, toString просто возвращает строку по умолчанию [object HTMLParagraphElement].