JavaScript

【JavaScript】無名関数とアロー関数とイベントリスナーのthis

投稿日:2019年7月29日 更新日:

1. はじめに

あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリックイベントに対してイベントリスナーを登録するとします。

<button id="btn">ボタン</button>

このとき、無名関数 function(){ ... } を使う場合と、アロー関数 () => { ... } を使う場合とで、this の扱いが違うので注意しましょうというお話です。

2. イベントリスナーの登録

無名関数を使う場合


document.querySelector('#btn').addEventListener('click', function() {

  // this は button になります

});

こちらの場合、無名関数の中に記述した this は、実行時にはボタン要素(id=”btn”)となります。JavaScript の実行エンジンが、こちらに気を遣ってくれてわざわざ切り替えてくれるイメージです。

アロー関数を使う場合


document.querySelector('#btn').addEventListener('click', () => {

  // this は window になります

});

こちらの場合、アロー関数の中に記述した this は、実行時には window になります。より正確に言うと、この記述部分が実行されたときのコンテキスト(オブジェクト)が this に束縛されます。たいていは windowsオブジェクトだろうということです。

3. まとめ

2つを比べた場合、無名関数を使った方が便利なことが多いのではないでしょうか?

これは「新しい仕様であるアロー関数の方を使っていれば問題は起きにくいはず」という思考が一概に正しいと言えない一例だと思います。

イベントリスナーを登録する際には、「気を付けないといけないことがあったような…」となるくらいには覚えておいた方がよいでしょう。

4. 参考

📂-JavaScript

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

JavaScript

JavaScriptで一定時間待ってから処理を開始する方法

目次1. はじめに2. 手順(async function版)3. 手順(Promise をそのまま使った版)4. いつ使うのか?参考 1. はじめに JavaScriptで一定時間待ってから何か処理 …

JavaScript

Yellow Fade の実装サンプル

JavaScript を使ったエフェクト処理の1つである Yellow Fade の実装サンプルを紹介します。

JavaScript

npm パッケージのセキュリティをチェックして必要なら対応する

目次1. npm パッケージのセキュリティnpm audit コマンドnpm outdated コマンド2. 実際にこれらのコマンドを利用してみる1. セキュリティのチェックと対応2. 古いパッケージ …

JavaScript

Node.js のバージョン管理ツール nvm の使い方

目次1. nvm とは?2. nvm の導入1. すでに nvm がインストールされているかチェックする2. nvm をインストールします3. Node.js のインストール4. nvm の便利なコマ …

JavaScript

JSON.stringify() の引数に関する忘備録

JavaScript でよく使う JSON.stringify()メソッドですが、第二引数と第三引数の意味を忘れがちなので本ページに記録しておきます。