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. JavaScript の 2種類のインポート機能(概要)1. モジュール側2. 呼び出し側静的インポート動的インポート2. 静的インポート1. この機能の呼び名2. 特徴3. 仕様4. ブラ …

Web Security

JavaScript の alert は CPUにたいした負荷を掛けないしタブを閉じれば終了します

以下の話題について書きます。 不正プログラム書き込み疑い補導 03月04日 20時04分 クリックすると同じ画面が表示され、消えなくなる不正なプログラムのアドレスをインターネットの掲示板に書き込んだと …

JavaScript

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

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

JavaScript

【JavaScript】 async / await の使い方

本サイトの JavaScriptで一定時間待ってから処理を開始する方法 でも少し使ったのですが、JavaScript の async / await の使い方についてこちらのページにまとめておきます。 …

JavaScript

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

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