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에서 숫자의 제곱이 포커스를 잃을 때 화면에 표시되기를 원했습니다. 그러나, 왜인지 포커스를 잃을 때 콘솔에 오류가 발생합니다. 코드 작성자의 오류를 수정하십시오. 코드 작성자에게 그의 오류가 왜 발생했는지 설명하는 글을 작성하십시오.