JavaScript-ში კონტექსტთან მუშაობის საფუძვლები

დავუშვათ, გვაქვს რაღაც ფუნქცია func, რომლის შიგნითაც გამოიყენება this:

function func() {
	console.log(this.value);
}

რაზე მიუთითებს this ამ ფუნქციაში? ჩვენ არ ვიცით. და JavaScript-ს არ აქვს ცნობა. და თავად ფუნქციას არ აქვს ცნობა. ანუ, ფუნქციის შექმნის მომენტში ზუსტად ის, რაზეც this მიუთითებს, არ არის განსაზღვრული. და ეს განსაზღვრული იქნება მხოლოდ მაშინ, როდესაც ეს ფუნქცია გაეშვება.

დავუშვათ, გვაქვს რაღაც ინფუთი:

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

მივაბათ ამ ინფუთს ჩვენი ფუნქცია func ისე, რომ ის შესრულდეს ინფუთის ფოკუსის დაკარგვის დროს. ახლა ფუნქციის შესრულების მომენტში this მიუთითებს ჩვენს ინფუთზე:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // ფოკუსის დაკარგვისას გამოიტანს 'text'-ს
}

მაგრამ, ჩვენ შეიძლება არა ერთი ინფუთი გვქონდეს, არამედ რამდენიმე:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

და თითოეულ ამ ინფუთს შეგვიძლია მივაბათ ჩვენი ფუნქცია func. ამ შემთხვევაში პირველი ელემენტისთვის this გაშვების მომენტში მიუთითებს მასზე, ხოლო მეორესთვის - მასზე.

პრაქტიკაში ეს ნიშნავს, რომ this ფუნქციის შიგნით დამოკიდებულია იმაზე, რომელ ინფუთზე დავკარგეთ ფოკუსი:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // გამოიტანს ან 'text1'-ს, ან 'text2'-ს
}

ზოგადად რომ ვთქვათ, this-ის ასეთი თვისება ძალიან მოსახერხებელია - ჩვენ ვქმნით მხოლოდ ერთ ფუნქციას და ვუკავშირებთ მას ნებისმიერი რაოდენობის ინფუთს. თუ this არ მიუთითებდა იმ ელემენტზე, რომელშიც მოხდა მოვლენა, მაშინ ჩვენ ეს ვერ მოგვცემდა - მოგვიწევდა თითოეული ინფუთისთვის შეგვექმნა საკუთარი ფუნქცია იგივე კოდით!