JavaScript-da call metodi arkaly konteksti berkitlemek

Şonuň üçin, biz this-iň aslynda nädip işleýändigini düşündik. Indi bir funksiýaň haýsy kontekstde çagyrylýandygyny (ýagny this-iň nämä deňdigini) mejbur etmekliği görkezmäge mümkinçilik berýän metotlara seredeliň.

Ilkinji öwrenerisimiz metod call diýilýär. Onuň işini bir mysalda görüň. Bizde bir input bolsun:

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

Bu input-a salgyny alalyň we ony elem üýtgeýjisine ýazalyň:

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

Indi func funksiýasyny düzeliň, onuň içinde this.value-ny çap edeliň:

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

Häzirki wagtda biziň funksiýamyz this-iň nämä salgylanýandygyny bilmeýär. Eger biz ony addEventListener arkaly berkidip bilerdik, şonda howa. Ýöne biz muny etmeris. Onuň ýerine, biz öz funksiýamyzy çagyryp, ona this-iň elem-e deň bolmalydygyny aýdarys.

Bu şeýle edilýär: func.call(elem). Bu kod, diňe func() ýaly ýönekeý funksiýa çagyrmaga deňdir, ýöne şert bilen, this elem-e deňdir.

Şonuň üçin, call metodynyň sintaksisi: funksiýa.call(obyekt). Hemmesini bilelikde jemläýälim:

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

function func() {
	console.log(this.value); // input-yň value-syny çap eder
}
func.call(elem);

Funksiýa berlen:

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

Üç sany input berlen:

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

call metodi we func funksiýasyny ulanmak arkaly, her bir input-yň value-syny ekrana çykaryň.