Аб'ект this у JavaScript

Зараз мы з вамі будзем працаваць са спецыяльным аб'ектам this, даступным у функцыі-апрацоўшчыку падзеі. Гэты аб'ект паказвае на элемент, у якім адбылася падзея.

Аб'ект this зручны, калі элемент, у якім адбылася падзея, і элемент, з якім здзяйсняюцца дзеянні ў выніку падзеі, - гэта адзін і той жа элемент.

Напрыклад, калі ў нас ёсць інпут, мы можам прывязаць да яго апрацоўшчык страты фокусу і па наступленні гэтай падзеі нешта зрабіць з тэкстам інпута. Давайце зробім апісанае. Хай у нас дадзены інпут:

<input id="elem" value="text">

Давайце атрымаем спасылку на яго ў зменную elem:

let elem = document.querySelector('#elem');

Прывязам да яго функцыю-апрацоўшчык падзеі blur:

elem.addEventListener('blur', func);

Унутры гэтай функцыі func будзе даступны аб'ект this, які паказвае на наш інпут:

function func() {
	console.log(this); // утрымлівае спасылку на наш элемент
}

Вывядзем змесціва атрыбута value нашага інпута:

function func() {
	console.log(this.value); // вывядзем змесціва атрыбута
}

Ну, а цяпер запішам у інпут які-небудзь тэкст:

function func() {
	this.value = '!!!';
}

Можна выкарыстоўваць і ананімную функцыю:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Дадзены інпут. Па атрыманні фокусу гэтым інпутам запішыце ў яго лік 1, а па страты фокусу - лік 2. Для звароту ў інпут унутры функцыі-апрацоўшчыка выкарыстоўвайце аб'ект this.

Дадзена кнопка, значэннем якой служыць лік 1. Зрабіце так, каб па кліку на гэту кнопку яе значэнне кожны раз павялічвалася на адзінку.