JavaScriptにおけるコンテキストの基本

例えば、内部でthisを使用する関数funcがあるとします：

function func() {
	console.log(this.value);
}

この関数内のthisは何を指しているのでしょうか？私たちは知りません。JavaScriptも知りません。そして関数自体も知りません。つまり、関数が作成される時点では、thisが具体的に何を指すかは定まっていないのです。そしてそれが定まるのは、この関数が呼び出された時だけです。

例えば、以下のような入力欄があるとします：

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

この入力欄に、フォーカスが外れた時に実行されるよう関数funcを紐付けましょう。これで、関数が実行される瞬間、thisはこの入力欄を指すようになります：

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // フォーカスが外れた時 'text' を出力
}

しかし、入力欄は1つではなく、複数あるかもしれません：

<input id="elem1" value="text1">
<input id="elem2" value="text2">

そして、これらの各入力欄に関数funcを紐付けることができます。この場合、最初の要素では関数が呼び出される瞬間のthisはそれを指し、二番目の要素ではそれを指します。

実践的には、これは関数内のthisが、どの入力欄でフォーカスが外れたかによって依存することを意味します：

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

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

function func() {
	console.log(this.value); // 'text1' または 'text2' を出力
}

基本的に、thisのこの特性は非常に便利です。わずか1つの関数を作成し、任意の数の入力欄に紐付けることができるのです。もしthisがイベントが発生した要素を指さなければ、このようなことは実現できません。各入力欄に対して同じコードの関数を別々に作成しなければならなかったでしょう！