JavaScriptのthisの挙動と用途を理解する方法

プログラミング

JavaScriptの初心者を悩ます文法の一つとして、thisが挙げられます。
thisが何を指しているのか、どのような場合に使われるのか、なかなかイメージが難しいと思います。

この記事では、その疑問について答えていきたいと思います。

今回の記事では、サンプルコードの実行はNode.jsで行います。
また、非Strictモード(’use strict’を宣言したりexport句でStrictモードに変更したりしない場合)を前提とします。
(Strictモードの場合は、thisによりグローバルオブジェクトを参照しようとした場合にundefinedになります)


1.thisキーワードの説明

「this」の説明の前に、JavaScriptとオブジェクトの関係について簡単に説明します。
JavaScriptは、必ずオブジェクトの中で実行する必要があります。
実行環境(ブラウザやNode.js)は「グローバルオブジェクト」と呼ばれるオブジェクトを用意しており、自分でオブジェクトを定義しない場合はグローバルオブジェクトから各々の処理が実行されています。
(ブラウザの場合のグローバルオブジェクトは「window」、Node.jsの場合のグローバルオブジェクトは「global」となります)

「this」キーワードは、記述箇所を動かしているオブジェクトを参照します。
自分で定義したオブジェクトから記述箇所を呼び出している場合はそのオブジェクト、そうではない場合はグローバルオブジェクトを返します。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し

2.callやapplyを用いて関数呼び出しした場合のthisの参照先

関数をメソッドチェーンで「call」や「apply」と繋ぐことで、呼び出される関数の中でthisが参照するオブジェクトを指定することができます。
オブジェクトの指定は「call」や「apply」の第一引数で行います。

また、「call」や「apply」は第二引数以降も指定が可能です。
第二引数以降では、関数呼び出しの際の引数を指定することができ、呼び出される関数の中では「arguments」キーワードでそれを受け取ることができます。
「call」は第二引数、第三引数、第四引数…といった具合に変数を一つずつ定義し、「apply」は第二引数に配列形式でまとめて変数を定義します。

【サンプルコード1】

【実行結果1】

・1回目の関数呼び出し

・2回目の関数呼び出し

【サンプルコード2】

【実行結果2】

・1回目の関数呼び出し

・2回目の関数呼び出し

3.bindを用いたthisの参照先変更

関数をメソッドチェーンで「bind」と繋ぐことで、thisの参照先を強制的に結びつけた新たな関数を定義できます。
結びつけるオブジェクトは第一引数で定義します。

【サンプルコード】

【実行結果】

4.アロー関数で関数定義した場合のthisの参照先

アロー関数で関数を定義した場合は、thisの参照先は固定になります。 関数を定義した時点のオブジェクトを指すようになります。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し


thisは、どのオブジェクトから呼び出されたかによって挙動を変えたい時に使用することが多いです。
ポリモーフィズムを実現するために使用する、と言った方がわかりやすいかもしれません。
また、今回の例では取り上げていませんが、関数を定義したオブジェクトを渡せばコールバック処理も可能です。

以下のサンプルコードは、呼び出したオブジェクトの名前を参照する例であり、どのオブジェクトから呼び出したかによって挙動を変えることができています。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し


いかがでしたでしょうか?

JavaScriptのthisは混乱しやすい文法ですが、JavaScriptはグローバルオブジェクトの元で実行されること、通常は呼び出し元のオブジェクトを指すこと、「call」「apply」「bind」キーワードやアロー演算子によりthisが指す先が変わること、を覚えておけば、thisを理解できるのではないかと思います。

JavaScript独自の文法については、これからの紹介していきたいと思います!

コメント

タイトルとURLをコピーしました