这个例子中 "this" 的上下文是什么？

Question

为什么这两行为 this 创建不同的值？

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

第一个用文件的 URI 发出警报，第二个用 "HTML Paragraph Element" 发出警报。所以换句话说，第二个上下文是 DOM 元素，但第一个是主要上下文。

我对此做了很多研究，其中一些有点难以理解，所以如果有人知道答案，你能帮我解释一下吗？

Answer 1

在内联 JavaScript 事件中，this 是触发事件的元素。这些都是 onclick 事件，因此 this 是您单击的元素。

当您使用 alert() 时，它会将其参数转换为字符串。当您将 <a> 元素对象转换为字符串时，您会得到它的 href 值。当您将 <p> 元素转换为字符串时，您只会得到 [object HTMLParagraphElement]，因为它没有自定义 toString.

相关文档：https://developer.mozilla.org/en-US/docs/Web/API/URLUtils/toString

Answer 2

对于 onclick 事件，this 变量绑定到被单击的 DOM 元素。当您对 javascript 中的变量调用 alert 时，它实际上调用了 toString()。当在锚标记上调用 toString() 时，实际上会返回 href 属性。在段落标签上调用时，它没有内置的 toString() 方法，而是使用默认方法（只打印 [object objectName].

Answer 3

问题是 HTMLAnchorElement inherits methods from HTMLElement (naturally) as well as implements methods of URLUtils interface. The later in its turn has method toString 哪个 returns 当前 href 属性。

当您 alert 任何东西时，它会将其参数转换为字符串类型，例如调用参数的 toString 方法。因此你看到的行为。

HTMLParagraphElement (<p>) 没有此属性，因此 toString 只是 returns 默认字符串 [object HTMLParagraphElement].

这个例子中 "this" 的上下文是什么？

What is the context of "this" in this example?

javascript

this