Асосҳои кор бо контекст дар 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 ба он элемент ишора намекард, ки воқеа дар он рӯй додааст, пас мо ин корро накарда метавонистем - маҷбур мешудим барои ҳар як вурудӣ функсияи худро бо ҳамон код эҷод кунем!