我正在学习将关键字“ this”与JavaScript中的DOM操作结合使用，但我误会了。也许有人可以帮助我理解它。
例如，我有一个简单的程序：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<p class="second">No excuses</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
<li class="three">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css：
.done {
text-decoration: line-through;
}
script.js：
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");
console.log("This 1 = " + this);
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
console.log("This 2 = " + this);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
function changeClass() {
this.classList.toggle("done");
console.log("This 3 = " + this);
}
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", changeClass)
}
button.addEventListener("click", addListAfterClick)
input.addEventListener("keypress", addListAfterKeypress)
这是一个简单的列表，您可以在列表中添加新元素，也可以在单击列表的元素时更改元素的类。
刷新浏览器时，我进入控制台：1 = [对象窗口]
之后，我在框中键入一个字母，然后单击“ Enter”按钮，然后进入控制台：This 2 = [object Window]。因此，该对象仍然是“窗口”。
之后，我从列表中单击一个元素，然后进入控制台：这个3 = [object HTMLLIElement]。我看到该对象从Window更改为HTMLLIElement。
我不明白何时将对象从Window更改为HTMLLIElement。为什么此2的对象是Window，而此3的对象是HTMLLIElement。谢谢！
最佳答案
刷新浏览器时，我进入控制台：1 = [对象窗口]
在全局代码中，将其设置为全局（浏览器窗口）对象。
之后，我在框中键入一个字母，然后单击“ Enter”按钮，然后进入控制台：This 2 = [object Window]。因此，该对象仍然是“窗口”。
调用函数时，未在调用中设置此函数，因此它默认为global / window对象。在严格模式代码中，它将是未定义的。
之后，我从列表中单击一个元素，然后进入控制台：这个3 = [object HTMLLIElement]。我看到该对象从Window更改为HTMLLIElement。
调用由addEventListener添加为侦听器的函数时，该函数将设置为侦听器所基于的元素，就像通过以下方式：
changeClass.call(element, event)
相关事件作为第一个参数传递。
我不明白何时将对象从Window更改为HTMLLIElement。为什么此2的对象是Window，而此3的对象是HTMLLIElement。
这是创建上下文时设置的执行上下文的参数。它可以在调用中设置或使用bind设置，或者在箭头函数中按词法设置（即从外部执行上下文中采用）。见How does the “this” keyword work?
关于javascript - 如何在JavaScript中通过DOM操作使用关键字“this”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52833893/