JavaScript のアロー関数で this を使いたい

サンプルコード

<!-- HTML -->
<button class="fnBtn">function</button>
<button class="arrowThis">() => this</button>
<button class="arrowEvent">() => event.currentTarget</button>
<!-- HTML -->

<script>

    // 従来のfunction() 用いた通常関数で this の値を取得する
    const fnBtn = document.querySelector('.fnBtn');
    fnBtn.addEventListener('click', function() {
        console.log(this);
    })

    // アロー関数で this の値を取得する
    const arrowThis = document.querySelector('.arrowThis');
    arrowThis.addEventListener('click', () => {
        console.log(this);
    })

    // アロー関数 event.currentTarget を用い 従来 this の値を取得する
    const arrowEvent = document.querySelector('.arrowEvent');
    arrowEvent.addEventListener('click', (event) => {
        console.log(event.currentTarget);
    })

</script>

アロー関数を使用すると this が使えない

上記コードを実行した結果が下記になる。

<button class="fnBtn">function</button>
Window {window: Window, self: Window, document: document, name: "", ……
<button class="arrowEvent">() => event.currentTarget</button>

ふたつめ、アロー関数で正直に this を取得しようとした時だけ、うまくクリックした要素を取得でできていないことがわかる。

解決策は event.currentTarget

解決策は３つめevent.currentTarget を使用したアロー関数。

結果を見るとクリックした要素を取得できていることがわかる。