JavaScriptにおける「this」は、「呼び出し元」で指し示すものが変わってくる。
基本的に以下の4種類のパターンが存在する。

  • 関数呼び出し(グローバルオブジェクト)のパターン
  • メソッド呼び出し(所属オブジェクト)のパターン
  • コンストラクタ呼び出し(インスタンス自身)のパターン
  • apply/call呼び出し(強制変更)のパターン

 

【関数呼び出し(グローバルオブジェクト)のパターン】

この場合、「this」は「グローバルオブジェクト」を指す。
つまり、「value」は「グローバル変数」になる。

 

【メソッド呼び出し(所属オブジェクト)のパターン】

この場合、「this」はメソッド「method」が所属しているオブジェクトである「myObject」を指す。
因みに以下のようにメソッド呼び出しの中で関数呼び出しをした場合でも関数内の「this」はグローバルを指してしまう為、関数呼び出し時の「this.value」は「undefind」となる。

尚、「this」を別の変数(下記の例では「self」)に格納しておくことで、この問題を解決することができる。

 

【コンストラクタ呼び出し(インスタンス自身)のパターン】

この場合、関数にnew演算子をつけてコンストラクタ呼び出しにてインスタンスを生成している為、「this」は生成されるインスタンス自身となる。
尚、new演算子をつけなかった場合、つまり関数呼び出しとなった場合は、「value」、「increment」共にグローバル変数として定義される。
※慣例として関数をコンストラクタ呼び出しで利用する場合、他の関数と区別しやすくする目的で関数名の先頭を大文字とする。

 

【apply/call呼び出し(強制変更)のパターン】

この場合、「this」の指すオブジェクトを「newObject」に差し替えてメソッドが呼び出される為、「newObject」の「value」の値が出力される。
「apply/call」を利用すると「強制的にthisの差し替え」ができる。
「apply/call」の第一引数は、「this」に指定したいオブジェクトになる。
尚、「apply」と「call」の違いは、第二引数の指定の仕方になる。

出力結果は、「apply」と「call」共に同じになる。
「apply」は第二引数に配列をとり、配列の中身が引数として渡される。
「call」は、第二引数以降がそのままの形で渡される。