blocks|key|2270433|text|在您询问的情况下，this表示HTML元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2270434|因此，点击的就是<a>元素。|2270435|entityMap^0|9|4|0|8|3|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

In the case you are asking about, <code>this</code> represents the HTML DOM element.

So it would be the <code>&lt;a&gt;</code> element that was clicked on.

blocks|key|746150|text|它引用了DOM中onclick属性所属的元素：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|746151|<script+type="text/javascript"
++++++++src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script+type="text/javascript">
function+func(e)+{
++$(e).text('there');
}
</script>
<a+onclick="func(this)">here</a>|code-block|syntax|javascript|746152|(本例使用jQuery。)|746153|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Document_Object_Model|1|http://jquery.com/^0|8|7|4|3|0|0|0|5|6|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

It refers to the element in the <a href="http://en.wikipedia.org/wiki/Document_Object_Model" rel="noreferrer">DOM</a> to which the <code>onclick</code> attribute belongs:

<pre><code>&lt;script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
function func(e) {
 $(e).text('there');
}
&lt;/script&gt;
&lt;a onclick="func(this)"&gt;here&lt;/a&gt;
</code></pre>

(This example uses <a href="http://jquery.com/" rel="noreferrer">jQuery</a>.)

blocks|key|904756|text|事件处理程序属性(如onclick+)的值应该是JavaScript，没有任何"javascript:“前缀。javascript:伪协议在URL中使用，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|904757|<a+href="javascript:func(this)">here</a>|code-block|syntax|javascript|904758|不过，您应该优先使用onclick="func(this)"表单。还请注意，在上面的示例中，使用javascript:伪协议"this“将引用window对象，而不是<a>元素。|offset|length|style|CODE|904759|entityMap^0|0|0|A|K|2B|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

The value of event handler attributes such as onclick should just be JavaScript, without any "javascript:" prefix. The javascript: pseudo-protocol is used in a URL, for example:

<pre><code>&lt;a href="javascript:func(this)"&gt;here&lt;/a&gt;
</code></pre>

You should use the <code>onclick="func(this)"</code> form in preference to this though. Also note that in my example above using the javascript: pseudo-protocol "this" will refer to the window object rather than the <code>&lt;a&gt;</code> element.

blocks|key|904761|text|在JavaScript中，this引用包含操作的元素。例如，如果您有一个名为hide()的函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|904762|function+hide(element){
+++element.style.display+=+'none';
}|code-block|syntax|javascript|904763|使用hide调用this将隐藏元素。它只返回单击的元素，即使它类似于DOM中的其他元素。|904764|例如，您可能会让this点击下面的HTML中的一个数字，只会隐藏点点。|904765|<ul>
++<li+class="bullet"+onclick="hide(this);">1</li>
++<li+class="bullet"+onclick="hide(this);">2</li>
++<li+class="bullet"+onclick="hide(this);">3</li>
++<li+class="bullet"+onclick="hide(this);">4</li>
</ul>|904766|entityMap^0|D|4|12|6|0|0|2|4|8|4|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|R|$]]

In JavaScript <code>this</code> refers to the element containing the action. For example, if you have a function called <code>hide()</code>:

<pre><code>function hide(element){
 element.style.display = 'none';
}
</code></pre>

Calling <code>hide</code> with <code>this</code> will hide the element. It returns only the element clicked, even if it is similar to other elements in the DOM.

For example, you may have <code>this</code> clicking a number in the HTML below will only hide the bullet point clicked.

<pre><code>&lt;ul&gt;
 &lt;li class="bullet" onclick="hide(this);"&gt;1&lt;/li&gt;
 &lt;li class="bullet" onclick="hide(this);"&gt;2&lt;/li&gt;
 &lt;li class="bullet" onclick="hide(this);"&gt;3&lt;/li&gt;
 &lt;li class="bullet" onclick="hide(this);"&gt;4&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|2270575|text|这里(这个)是一个对象，它包含dom元素的所有特性/属性。你可以从|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2270576|console.log(this);|code-block|syntax|javascript|2270577|这将显示带层次结构的dom元素的所有属性。您可以这样操作dom元素。|2270578|另请参阅以下连结：-|2270579|http://www.quirksmode.org/js/this.html|offset|length|2270580|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

Here (this) is a object which contains all features/properties of the dom element.
you can see by 

<pre><code>console.log(this);
</code></pre>

This will display all attributes properties of the dom element with hierarchy.
You can manipulate the dom element by this.

Also describe on the below link:-

<a href="http://www.quirksmode.org/js/this.html" rel="nofollow">http://www.quirksmode.org/js/this.html</a>

blocks|key|746176|text|在调用函数时，单词"this“是对调用函数的对象的引用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|746177|在您的示例中，它是对锚元素的引用。在另一端，函数调用然后通过传递的参数访问元素的成员变量。|746178|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

When calling a function, the word "this" is a reference to the object that called the function.

In your example, it is a reference to the anchor element. At the other end, the function call then access member variables of the element through the parameter that was passed.

blocks|key|746119|text|this引用onclick方法所属的对象。因此，在func中，this将是a元素的DOM节点，this.innerText将是here。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|746120|entityMap^0|0|4|6|7|P|4|V|4|11|1|1B|E|1R|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|G|$]]

<code>this</code> referes to the object the <code>onclick</code> method belongs to. So inside <code>func</code> <code>this</code> would be the DOM node of the <code>a</code> element and <code>this.innerText</code> would be <code>here</code>.

<pre><code>&lt;a onclick="javascript:func(this)" &gt;here&lt;/a&gt;
</code></pre>

What does <code>this</code> mean in the script?

What's "this" in JavaScript onclick?

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

问点击JavaScript中的“这”是什么？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击JavaScript中的“这”是什么？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击JavaScript中的“这”是什么？
EN