如何在 JavaScript 中使用关键字“this”进行 DOM 操作

Question

I'm learning about using keyword "this" with DOM manipulation in JavaScript and I have a missunderstand.我正在学习在 JavaScript 中使用关键字“this”和 DOM 操作，但我有一个误解。 Maybe someone can help me to understand it.也许有人可以帮助我理解它。

For example I have this simple program:例如我有这个简单的程序：

<!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:样式.css：

.done {
    text-decoration: line-through;
}

script.js:脚本.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)

It is a simple list, and you can add new elements in the list, also you can change the class of an element when you click on an element of the list.它是一个简单的列表，您可以在列表中添加新元素，也可以在单击列表元素时更改元素的类。

When I refresh the browser I get in the console: This 1 = [object Window]当我刷新浏览器时，我进入控制台： This 1 = [object Window]

After that I type a letter in the box and click the "Enter" button and I get in the console: This 2 = [object Window] .之后，我在框中键入一个字母并单击“Enter”按钮，然后进入控制台： This 2 = [object Window] 。 So, the object is still "Window".所以，对象仍然是“窗口”。

After that I click on an element from the list and I get in the console: This 3 = [object HTMLLIElement] .之后，我单击列表中的一个元素并进入控制台： This 3 = [object HTMLLIElement] 。 I see that the object is changed from Window to HTMLLIElement.我看到对象从 Window 更改为 HTMLLIElement。

I don't understand when the object is changed from Window to HTMLLIElement.我不明白对象何时从 Window 更改为 HTMLLIElement。 Why the object for This 2 is Window and the object for This 3 is HTMLLIElement.为什么This 2 的对象是Window 而This 3 的对象是HTMLLIElement。 Thank you!谢谢！

Answer 1

When I refresh the browser I get in the console: This 1 = [object Window]当我刷新浏览器时，我进入控制台：This 1 = [object Window]

In global code, this is set to the global (window in a browser) object.在全局代码中，这被设置为全局（浏览器中的窗口）对象。

After that I type a letter in the box and click the "Enter" button and I get in the console: This 2 = [object Window].之后，我在框中键入一个字母并单击“Enter”按钮，然后进入控制台：This 2 = [object Window]。 So, the object is still "Window".所以，对象仍然是“窗口”。

When the function is called, this is not set in the call so it defaults to the global/window object.当函数被调用时，这不会在调用中设置，所以它默认为全局/窗口对象。 In strict mode code, it would be undefined .在严格模式代码中，它将是undefined 。

After that I click on an element from the list and I get in the console: This 3 = [object HTMLLIElement].之后，我单击列表中的一个元素并进入控制台：This 3 = [object HTMLLIElement]。 I see that the object is changed from Window to HTMLLIElement.我看到对象从 Window 更改为 HTMLLIElement。

When a function added as a listener by addEventListener is called, its this is set to the element the listener is set on, as if by:当调用addEventListener添加为侦听器的函数时，它的this设置为设置侦听器的元素，就像通过：

changeClass.call(element, event)

The related event is passed as the first argument.相关事件作为第一个参数传递。

I don't understand when the object is changed from Window to HTMLLIElement.我不明白对象何时从 Window 更改为 HTMLLIElement。 Why the object for This 2 is Window and the object for This 3 is HTMLLIElement.为什么This 2 的对象是Window 而This 3 的对象是HTMLLIElement。

this is a parameter of an execution context that is set when the context is created.这是在创建上下文时设置的执行上下文的参数。 It can be set in the call or using bind , or lexically in arrow functions (ie adopted from the outer execution context).它可以在调用中或使用bind 设置，或在箭头函数中按词法设置（即从外部执行上下文中采用）。 See How does the “this” keyword work?请参阅“this”关键字如何工作？

如何在 JavaScript 中使用关键字“this”进行 DOM 操作

问题描述

1 个解决方案

解决方案1
2 2018-10-16 11:14:03

如何在 JavaScript 中使用关键字“this”进行 DOM 操作

问题描述

1 个解决方案

解决方案1 2 2018-10-16 11:14:03

解决方案1
2 2018-10-16 11:14:03