转自：微点阅读 https://www.weidianyuedu.com
this这个关键字
最强大的JavaScript关键字之一是this。不幸的是，如果您不完全了解它的工作原理，则很难使用。
我下面解释如何在事件处理中使用它 。稍后，我将添加有关的其他用法的一些信息this。
所有人
我们将在页面其余部分讨论的问题是：this函数中指的是什么doSomething()？
函数doSomething（）{ this.style.color ='＃cc0000'; }
在JavaScript中，this总是指我们正在执行的函数的“所有者”，并应注意，指函数是方法的对象。当我们doSomething()在页面中定义忠实的函数时，其所有者 是页面，或者更确切地说，window是JavaScript的的对象（或全局对象）。的onclick财产，不过，被它属于HTML元素拥有。
这种“所有权”是JavaScript面向对象方法的结果。有关更多信息，请参见“对象作为关联列表”页面。
------------ window --------------------------------------| / \ || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || -------------------- || | onclick property | || -------------------- || |----------------------------------------------------------
如果我们doSomething()不作任何准备就执行该this关键字，则该关键字指向该窗口，并且该函数尝试更改style.color该窗口。由于窗口没有style对象，因此该函数将失败，并产生JavaScript错误。
复制中
因此，如果我们想充分利用this它，则必须注意，使用它的函数由正确的HTML元素“拥有”。换句话说，我们必须 将函数复制到我们的onclick属性。传统事件注册会处理它。
element.onclick = doSomething;
该函数将全部复制到onclick属性（现在变成方法）。因此，如果执行事件处理程序，则this引用HTML元素，并且该元素将 color被更改。
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
诀窍当然是我们可以将函数复制到多个事件处理程序。每次this都会引用正确的HTML元素：
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- | || | || ----------------------- | || | another HTML element| <-- this | || ----------------------- | | || | | | || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
因此，您this可以最大程度地使用。每次调用该函数时，均 this指的是当前正在处理事件的HTML元素，即“拥有”其副本的HTML元素doSomething()。
Referring
但是，如果您使用内联事件注册
<element onclick =“ doSomething（）”>
您不复制该功能！相反，您引用它，并且区别至关重要。该onclick属性不所有游戏实际的函数，而只是一个函数调用：
做一点事（）;
因此它说“去doSomething的（）并执行它。” 当我们再次到达关键字时，doSomething()该this关键字再次指向全局窗口显示对象，并且该函数返回错误消息。
------------ window --------------------------------------| / \ || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- / \ || | go to doSomething() | | || | and execute it | ---- reference to || ----------------------- function || |----------------------------------------------------------区别
如果要使用this访问处理事件的HTML元素，则必须确保将this关键字实际写入onclick属性中。只有在这种情况下，它才引用事件处理程序注册到HTML元素。所以如果你这么做
element.onclick = doSomething; 警报（element.onclick）
你得到
函数doSomething（）{ this.style.color ='＃cc0000'; }
如您所见，this关键字存在于onclick方法中。因此，它是指HTML元素。
但是如果你这样做
<element onclick =“ doSomething（）”> alert（element.onclick）
你得到
function onclick（）{ 做一点事（）}
这方法对功能的引用doSomething()。该方法中this不存在关键字，onclick因此它不引用HTML元素。
示例-复制
thisonclick在以下情况下会写入方法：
element.onclick = doSomething element.addEventListener（'click'，doSomething，false）element.onclick = function（）{this.style.color ='＃cc0000';} <element onclick =” this.style.color ='＃ cc0000';”>示例-参考
在以下情况下this是指窗体：
element.onclick = function（）{doSomething（）} element.attachEvent（'onclick'，doSomething）<element onclick =“ doSomething（）”>
请注意存在attachEvent()。微软注册事件模型的主要缺点 的英文attachEvent()创建³³ 对函数的引用，而不复制它。因此，有时无法知道当前由哪个HTML处理该事件。
组合
使用内联事件注册时，您还可以发送this到函数，盔甲仍然可以使用它：
<element onclick =“ doSomething（this）”> 函数doSomething（obj）{ //它存在于事件处理程序中，并发送给函数 // obj现在引用HTML元素，因此我们可以 obj.style.color ='＃ cc0000'; }
