Почему не работает вторая функция?

Question

[Сергей Бурдужа]

Добрый день.
Не могу понять, почему не срабатывает вторая закоментируемая функция.
Вроде бы использую стрелочную функцию и контекст не теряется?
В чем может быть проблема?

export default class ExportSidebar {
	constructor() {
		this.searchInput = document.querySelector('.search-wrap input');
		this.searchBtnSubmit = document.querySelector('.search-wrap');
		this.searchOpenBtn = document.querySelector("#search-open .fa-search");
		this.searchHtml = document.querySelector(".search");
		this.searchList = document.querySelector('.search__list');
		this.events();
	}

	events() {
		this.searchOpenBtn.addEventListener("click", this.openSearch.bind(this));
		// this.searchOpenBtn.addEventListener("click", () => {
		// 	this.openSearch.bind(this);
		// 	this.searchInput.focus();
		// });
	}
	openSearch() {
		console.log(this);
		this.searchHtml.classList.add("active");
	}

	closeSearch() {
		this.searchHtml.classList.remove("active");
	}
}

Заранее благодарен.

Comments

[Ярослав Иванов]

this.openSearch.bind(this);
Потому что это не вызов.

[Сергей Бурдужа]

Ярослав Иванов, А что? ))

[Ярослав Иванов]

Сергей Бурдужа, https://learn.javascript.ru/bind
а то

[Сергей Бурдужа]

Ярослав Иванов, Спасибо.

[Сергей Бурдужа]

Ярослав Иванов, Спасибо, я уже попробовал и работает.

[Ярослав Иванов]

Сергей Бурдужа,

this.searchOpenBtn.addEventListener("click", () => {
    this.openSearch.bind(this);
    this.searchInput.focus();
});

Внутри addEventListener this уже указывает на элемент. Поэтому верхний вариант верный.

На будущее

let a = { x: 10 }

function kek() {
    console.log(this.x)
}

kek.call(a) // 10
kek.apply(a) // 10
kek.bind(a) // function() {} возвращает тело функции связанное с контекстом.
kek.bind(a)() // 10

[Сергей Бурдужа]

Ярослав Иванов,Спасибо.