JavaScript thisを参照する方法

Question

下記コードでthisを参照して、idのaとbをalert表示したいのですが、
undefinedとなってしまいます
どのようにしたらthisを参照できるのでしょうか

<script>
window.onload=function(){
Array.from(document.querySelectorAll("input[type='button']"), i => {
i.onclick = () => {
alert(this.id);
};
});
}
</script>

<input id="a" type="button">
<input id="b" type="button">

Answer 1

アロー関数の最大の特徴が「関数実行中のthisが関数定義時のthisに固定される」ことです。イベントリスナ呼び出し時に対象要素を this にしたいなら、アロー関数は使えません。

i.onclick = function() {
  alert(this.id);
};

イベントリスナにアロー関数を使っても、Event.target で同じ情報を得ることができます。

i.onclick = e => {
  alert(e.target.id);
};

Answer 2

JavaScriptにおけるthisって結構厄介な印象（ネットで調べたら解説記事は数多出てくるし、私も説明できるほど詳しくない。）
ので、「イベントが発生した自身」を参照したい目的なのでしたらthisよりも
event.currentTargetのほうが確実です。

		i.onclick = (e) => {
			alert(e.currentTarget.id);
		};