第15回　thisについて理解してみよう。

this is a pen, this is an apple.
もう古いんでしょうか。
今回は前回、前々回と急に現れたthisについて簡単に説明します。
実際プログラミングを書いていくと「あぁ、こういうことか」
となるはずなので、簡単に説明します。
複雑なプログラムを書いている中で、thisがどうしても何を指しているか
わからなくなった時にもう一度読んでもらえると嬉しいです。

プログラム中のthisとは何か

使い方によって指し示すものが変わってきます。
実際にthisを見ていきましょう。

そのままthisを打った場合
windowを指します。

thisが指すものその1

windowというのは画面です、画面に映っているものすべてを指します。

alert(this.document.title)

1

alert(this.document.title)

上の文を打つとページのタイトルが取得できます。
documentというのはページに表示している内容すべてを指します。そして
titleはページのタイトルですね。thisはwindowを指しているので
下のようにも書き換えることができます。

alert(window.document.title)

1

alert(window.document.title)

同じ結果が出ますね。
正直このthisの使い方はあまりしないです。素直にwindow使います。
関数内で使うthis

function thisTEST(){ console.log(this) } thisTEST();

1
2
3
4
5

function thisTEST(){
console.log(this)
}

thisTEST();

関数内のthis

1番と同じです。
関数内のthisはwindowを指します。
オブジェクトのメソッド内に書かれている場合

var object = { prop: 'check this', thisTEST: function() { console.log(this); } }; object.thisTEST()

1
2
3
4
5
6
7
8

var object = {
  prop: 'check this',
  thisTEST: function() {
    console.log(this);
  }
};

object.thisTEST()

オブジェクト内のthis

この場合のthisは自身を含むオブジェクトを指します。
コンストラクタのthis

コンストラクタのthis

コンストラクタ内のthisはインスタンス化されたオブジェクト自信を指します。