【javascript】クリックした要素をthisで取得して関数で使うときの注意

javascriptのグローバル変数はローカルスコープで参照できる

まず、javascriptはグローバルスコープで宣言されたグローバル変数をローカルスコープで容易に利用ができる

var a = 1;
function test(){
	console.log(a);
}
test();// 1
console.log(a);// 1

thisの参照先が異なる件

本題、クリックイベント内でクリックした要素を取得するためにthisを使いさらに関数を中に作って利用しようと思ったら思った挙動にならなかった

<p id="test">テスト</p>

<script>
document.getElementById("test").onclick = function() {
	console.log(this);// <p id="test">テスト</p>
	const test = function(){
		console.log(this);
		// Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	}
	test();
};
</script>

こんな感じでtest関数はWindowオブジェクトを参照してしまう
要素を取得したいので以下のように書き直し

document.getElementById("test").onclick = function() {
	const elm = this;
	console.log(elm);// <p id="test">テスト</p>
	const test = function(){
		console.log(elm);// <p id="test">テスト</p>
	}
	test();
};

これで取得できる

ちなみにこういう関数の中の関数を「クロージャ関数」っていうらしい
ローカル変数は処理が終わったら破棄されるけどクロージャ関数が外の変数を参照することにより、本来破棄される変数を保存しておけたりするみたい

繰り返し系の処理なんかで役に立つかもね