Konteksti muuttujan kautta JavaScriptissä

Ratkaisu on seuraava: ulommaisessa funktiossa tallennamme this mihin tahansa muuttujaan, ja tämä muuttuja on saatavilla sisäisessä funktiossa, kuten kaikki muuttujat (yleensä tätä muuttujaa kutsutaan self). Näin välitämme this ulommaisesta funktiosta sisäiseen:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this.value); // tulostaa 'text'
	
	let self = this; // tallennetaan this mihin tahansa muuttujaan, esimerkiksi self
	
	function child() {
		console.log(self.value); // tulostaa 'text'
	}
	child();
}

Olkoon annettuna tällainen koodi:

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

"use strict";

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

function func() {
	alert( square() );
	
	function square() {
		return this.value * this.value;
	}
}

Koodin kirjoittaja halusi, että kentän fokuksen menettäessä näytölle tulostettaisiin value-kentän arvon neliö. Kuitenkin jostain syystä fokuksen menettäessä konsoliin ilmestyy virhe. Korjaa koodin kirjoittajan virhe. Kirjoita teksti, jossa annat selityksen koodin kirjoittajalle, miksi hänen virheensä syntyi.