JavaScriptにおける変数によるコンテキスト

解決策は次の通りです: 外側の関数で this を任意の変数に保存します。この変数は、他のすべての変数と同様に内側の関数からアクセス可能になります (通常、この変数は self と名付けられます)。これにより、 this を外側の関数から内側の関数へ渡すことができます:

"use strict";

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

function parent() {
	console.log(this.value); // 'text'を出力
	
	let self = this; // thisを任意の変数、例えばselfに保存
	
	function child() {
		console.log(self.value); // 'text'を出力
	}
	child();
}

次のようなコードがあるとします:

<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;
	}
}

コードの作者は、入力欄からフォーカスが外れたときに、 value の数値の平方が画面に表示されることを意図していました。しかし、どういうわけかフォーカスが外れるとコンソールにエラーが表示されます。作者のコードの誤りを修正してください。また、なぜその誤りが発生したのかを作者に説明する文章を書いてください。