トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > javascriptのthisについて

javascriptのthisの指し示す範囲について説明していこうと思う。

プロパティに無名関数を入れる場合

結論としては、呼び出し元に応じてthisの指すものが変わる。詳細は以下の通り。

var x = "outer";
var test1 = {
       x:"test1",
       sample:function(){
          alert(this.x); //・・・test1を呼び出しているオブジェクトのxを指す
       },
       sample2:function(){
           alert(test1.x); //・・・test1内のxを指す
       },
       sample3:function(){
           alert(x);  //・・・test1内のxは指さず、test1の外のxを指す
       }
};

var test2 = {x:"test2"};

/*動作確認用関数*/
function test() {
     test1.sample(); //test1が表示される
     
     /*test2オブジェクトにtest1オブジェクトを格納*/
     test2.sample = test1.sample;           //test2のオブジェクトにtest1.sampleを追加。
     test2.sample();                        //this.xのthisはtest2をさすため、test2が表示される。

     /*bindを利用し、test1.sampleをtest2オブジェクトとして実行するケース*/
     var test3 = test1.sample.bind(test2); //test2のオブジェクトとしてtest1を実行する
     test3();                              //<-this.xはbindしたtest2をさすため、test2が出力される
}

thisの参照は上記のようになっているため、

var ClassA = function() {
   var obj = this;
   this.functionA() {
     setInterval(function(){this.functionB();},100); //無名関数内のthisであって、このクラスのfunctionBを参照しない。
     setInterval(function(){obj.functionB();},100); //上記を回避する場合には
                                                      クラスのthis(正確にはクラスを生成するインスタンスを表すthis)を変数に格納して使う。
   }
   this.functionB() {
   }
}

※bindについてはbindについても参照されたし。

アロー関数を使用する場合

thisは定義時に決まるため、呼び出し元に応じて変化しない。

var x = "outer"
let test=()=>{
   console.log(this.x);
}
let obj = {
  x: "obj",
  test: test
}
obj.test(); //objではなく、outerを表示する。