Ғолияти this дар JavaScript

Аз гуфтаҳои қаблӣ ҳоло ғолияти махсуси this равшан нест. Зеро дар дохили функсияи коркардкунанда элементи мо дастрас хоҳад буд - зеро тағирёбандаи elem барои функсияи мои func саросари ҷоҳонӣ хоҳад буд:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  // дар ин ҷо тағирёбандаи elem бо элементи мо дастрас аст
}

Ва, фаҳмидани он душвор нест, ки муҳтавои this ва муҳтавои тағирёбандаи elem дар ҳолати мо баробарҳоӣ доранд:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  console.log(elem === this); // true-ро чоп мекунад
}

Ғолияти махсуси this дар чӣ аст? Он ҳангомие зоҳир мешавад, ки чанд элемент дорем, ва ба ҳар як онҳо як функсияи якхела занҷир шудааст.

Биёед ба мисол нигарем. Фарз мекунем, ки мо 3 тугма дорем:

html<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Ишораҳо ба онҳоро дар тағирёбандаҳо гирем:

javascriptlet button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Ба ин тугмаҳо як функсияи якхела занҷир мекунем:

javascriptbutton1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Ва дар дохили функсия this.value-ро чоп мекунем:

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

Маълум мешавад, ки мо се тугма дорем. Фишурдани ҳар як тугма ба фарохонӣ шудани функсияи func оварда расонад. Дар ин ҳол дар ҳар як клик this ишора ба он тугмаро дар бар хоҳад гирифт, ки воқеа дар он рух додааст.

Яъне ҳар як фишурдан ба консол value-и он тугмаро, ки фишурда шудааст, чоп мекунад, аммо ин корро як функсияи якхелаи func анҷом медиҳад! Ин ғолияти истифодаи this аст.