Die this-fout in JavaScript se pylfunksie-handleerder

Dit het onlangs mode geword om oral pylfunksies in plaas van gewone funksies te gebruik. Hierdie funksies het eger 'n nadeel - hulle behou nie this nie. Kom ons kyk na watter probleem ons teëkom as gevolg hiervan.

Gestel ons het 'n knoppie:

<button>text</button>

Kry 'n verwysing na hierdie knoppie in 'n veranderlike:

let button = document.querySelector('button');

Koppel 'n gebeure-handleerder aan die knoppie, met behulp van 'n pylfunksie:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Dit is waar ons 'n verrassing kry: this in die pylfunksie sal nie verwys na die element waar die gebeurtenis plaasgevind het nie.

Kom ons kyk wat ons daaraan kan doen.

Oplossing een

Jy kan die gebruik van this laat vaar en die veranderlike gebruik waaraan die gebeurtenis gekoppel is:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Oplossing twee

Jy kan die element waaraan die gebeurtenis gekoppel is, kry deur event.target:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Oplossing drie

Jy kan die pylfunksie laat vaar en 'n gewone funksie gebruik:

button.addEventListener('click', function() {
	console.log(this.textContent);
});