Как использовать ключевое слово "this" с манипулированием DOM в JavaScript - PullRequest
Новая
       7

Как использовать ключевое слово "this" с манипулированием DOM в JavaScript

0 голосов
/ 16 октября 2018

Я узнаю об использовании ключевого слова "this" с манипулированием DOM в JavaScript, и у меня возникло недоразумение.Может быть, кто-то может помочь мне понять это.

Например, у меня есть эта простая программа: 

<!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)

Это простой список, и вы можете добавлять новые элементы в список, а также вы можете изменить класс элемента при нажатии на элемент списка.

Когда я обновляю браузер, я получаю в консоли: This 1 = [Окно объекта]

После этого я набираю букву в поле и нажимаю «Enter»."и я попадаю в консоль: This 2 = [Object Window] .Итак, объект по-прежнему «Окно».

После этого я нажимаю на элемент из списка и получаю в консоли: This 3 = [object HTMLLIElement] .Я вижу, что объект изменен с Window на HTMLLIElement.

Я не понимаю, когда объект изменяется с Window на HTMLLIElement.Почему объект для This 2 - это Window, а объект для This 3 - это HTMLLIElement.Спасибо!

1 Ответ

0 голосов
/ 16 октября 2018

Когда я обновляю браузер, я получаю в консоли: Это 1 = [Окно объекта]

В глобальном коде это устанавливается на глобальное (окно в браузере) объект.

После этого я набираю букву в поле, нажимаю кнопку «Ввод» и получаю в консоли: Это 2 = [Окно объекта].Таким образом, объект по-прежнему «Окно».

Когда вызывается функция, this не устанавливается в вызове, поэтому по умолчанию используется объект global / window.В коде строгого режима это будет undefined .

После этого я нажимаю на элемент из списка и получаю в консоли: This 3 = [object HTMLLIElement].Я вижу, что объект изменяется с Window на HTMLLIElement.

Когда вызывается функция, добавленная в качестве прослушивателя addEventListener , ее this устанавливается вэлемент, на который установлен слушатель, как если бы: 

changeClass.call(element, event)

Связанное событие передается в качестве первого аргумента.

Я не понимаю, когда объект меняется с Window на HTMLLIElement.Почему объектом для This 2 является Window, а объектом для This 3 является HTMLLIElement.

this - это параметр контекста выполнения, который устанавливается при создании контекста.Это может быть установлено в вызове или с использованием bind , или лексически в функциях стрелок (то есть принято из внешнего контекста выполнения).См. Как работает ключевое слово this?

...