JavaScriptにおけるthisの違いについて

気になる記事を発見。

JavaScriptの「this」は「4種類」？？ - Qiita

とりあえず下記の3種類について調べてみた。

• メソッド呼び出しパターン
• 関数呼び出しパターン
• コンストラクタ呼び出しパターン

まずは違いを分かりやすくするためにソースを書いてみる。

メソッド呼び出しパターン

  var testObj = {
    
    //Javaでいうとフィールドのイメージ
    value:100,
    
    //Javaでいうとメソッドのイメージ
    testMethod:function(){
      
      //メソッド内でthisを呼んでいるので100が出力される
      //thisはtestObjを指している
      console.log("method:" + this.value);
    }
  }

メソッドの中でthisを呼んでいるのでこの場合のthisはtestObjを指している。
なので、this.valueとtestObj.valueが同じ意味になる。

関数呼び出しパターン

var value = 300; //グローバル変数

/* ～～ 途中の処理省略 ～～*/
  
  //関数
  function hoge(target){
    
    //関数呼び出しの場合はグローバル変数のvalue
    //インスタンスを生成した場合はインスタンス固有のvalue
    this.value;
    console.log(target + this.value);
    //console.log(target + this);
  }

/* ～～ 途中の処理省略 ～～*/

  //関数呼び出し
  hoge("function1:");

関数の中でthisを呼び出しているのでこの場合のthisはグローバルオブジェクトとなる。
なので、関数内のthis.valueはグローバル変数となり、300が出力される。

開発者ツール(F12)で調べると
Windowオブジェクト(グローバルオブジェクト)の中にvalueがあることが分かる。

コンストラクタ呼び出しパターン

  //関数
  function hoge(target){
    
    //関数呼び出しの場合はグローバル変数のvalue
    //インスタンスを生成した場合はインスタンス固有のvalue
    this.value;
    console.log(target + this.value);
    //console.log(this);
    
  }
  
  //メソッド呼び出し
  testObj.testMethod();
  
  //インスタンス生成
  //valueを定義していないのでundefinedが出力される
  var instanceHoge = new hoge("instance1:");
  
  //関数呼び出し
  hoge("function1:");
  

インスタンスを生成した場合(new)、生成時はthis.valueの中に値を定義
していないのでundefinedが出力される。
これは生成したインスタンス内のvalueと
グローバル変数のvalueという違いがあるので出力結果が異なるのだと思う。

とりあえず違いとしてはなんとなく分かった気がする。
時間があればapply,call呼び出しパターンについても調べてみようと思う。