Зачем здесь self (на что можно заменить)?

Question

[Antonio09]

пишу вместо self.innerHTML = this.value;

this .innerHTML = this.value;
и не будет работать

20-23 строки
https://jsfiddle.net/s8245hx3/

Comments

[Aetae]

А подумать? Что вот тут у вас по вашему происходит: this.innerHTML = this.value;? Что такое тут this, и как один this от другого должен отличить интерпретатор?

[Antonio09]

Aetae, а на что можно заменить?

[Aetae]

Antonio09, на self?
Никакой магии же. Вы сохраняете "внешний" this в переменную self(или любую другую) и использете его таким образом одновременно с "внутренним" this.
При срабатывании события this для переданной функции-обработчика устанавливается равным тому элементу, на который этот самый обработчик и повесили.

В принципе можно конструкцию:

let self = this;
edit.addEventListener('keypress', function(event) {
  if (event.key =='Enter') {
    self.innerHTML = this.value;
  }
});

заменить на

edit.addEventListener('keypress', (event) => {
  if (event.key =='Enter') {
    this.innerHTML = edit.value;
  }
});

Т.к. у стрелочной функции своего this не может быть, и всегда запоминается "внешний".

[Antonio09]

Aetae, спасибо)

Answer 1

[Дуболом Одноклеточный]

self нужен для того, чтобы получить this того элемента, который находится выше

Answer 2

[be_a_man]

Заменить на стрелочную функцию, чтобы сохранить контекст this.
А в целом там такая лапша, что нужно все удалить и написать нормально

edit.addEventListener('keypress', (event) => {
    if (event.key == 'Enter') {
        this.innerHTML = edit.value
    }
});

Comments

[Antonio09]

be_a_man, типа быдлокод?

Answer 3

[shsv382]

У тебя там тааакая жесть...зачем хоть добавлять обработчики внутри добавления обработчиков внутри добавления других обработчиков, и при этом еще обращаться к this??? Попробуй объявить все обработчики в разных функциях и назначать их ссылочно

Comments

[Antonio09]

shsv382, а как ссылаться?
так же через self?

[shsv382]

Antonio09, ну как вариант - определить функцию высшего порядка

function editHandler(self) {
	return function(event) {
	    if (event.key =='Enter') {
	      	self.innerHTML = this.value;
	    }
	}
}

// ...

edit.addEventListener('keypress', editHandler(this));

[shsv382]

Antonio09, ты вообще хоть читал про this? Что в каком месте оно означает понимание есть?

[Antonio09]

shsv382, +