読者です 読者をやめる 読者になる 読者になる

順次、選択、そして繰り返し

プログラミングのことやITのこと、たまに演劇のことも書きます。

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.valuetestObj.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が出力される。

f:id:sndstudy:20151208231609p:plain

開発者ツール(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呼び出しパターンについても調べてみようと思う。