ITコラム

JavaScript【 this 】 ~ 独特なキーワード

JavaScript

2017.12.12

JavaScript【 this 】 ~ 独特なキーワード

JavaScriptの「 this 」は、コードのどこからでも使うことができる便利なキーワードですが、通常の変数等に比べて 明確なイメージを持つことが難しい面もあります。
今回は、JavaScript の「 this 」について紹介します。

目次

 
1.this とは
2.オブジェクトの中の this
3.コンストラクタの中の this

1.this とは

 
JavaScriptの「 this 」は、コードのどこからでも使うことができる特別なキーワードです。

この this というキーワードは、呼び出した 場所 や 方法 によって その中身が変わる という特徴があります。

ですので、とても便利に使用できますが、理解が難しいと感じるキーワードでもあります。
 
 
「 alert(this); 」として、this をそのままアラート表示してみます。
ボタンをクリックしてみて下さい。

  

 
this のみを記述して出力すると、Window オブジェクトが出力されます。

これは、this のみの場合、グローバルオブジェクト( windowオブジェクト )と同じ扱いになることを示しています。

ですので、「 this.プロパティ名 」と「 window.プロパティ名 」とは 同義となります。

this.str = "こんにちは!";

alert(this.str);
alert(window.str);

上のサンプルでは、新しく「 this.str 」を作成して「 こんにちは! 」という文字列を代入しています。
 
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。

  
 
  

 
「 alert(this.str); 」、「 alert(window.str); 」共に「 こんにちは! 」の文字列が アラート表示されます。

このように、何もないところに「 this 」を記述すると、window オブジェクトと同じ扱いとなります。

▲目次へ戻る

 

2.オブジェクトの中の this

 
先ほどは、何もないところに「 this 」を記述しましたが、今度はオブジェクトの中に「 this 」を記述してみます。

var obj = {

    prp1 : this

}

alert(obj.prp1);

 
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。

  

 
上のサンプルは、新しいオブジェクト obj を作成して、その中のプロパティ prp1 に this の中身を代入しています。

アラートの表示内容は、先ほどの「 alert(this); 」と同じように windowオブジェクト となります。
 
 
次に、メソッドを作成して、その中に this を記述してみます。

var obj = {

    disp : function() {

        alert(this);
    
    }
}

obj.disp();

 
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。

  

 
上のサンプルは、オブジェクト内に メソッド disp を作成して、その中に this を記述しています。

アラートの表示内容は、window オブジェクト ではなく、object オブジェクト となります。
これは、上のサンプル内で作成した オブジェクト obj を示しています。
 
 
このように、メソッドの 中 と 外 では、this の中身が変化します。

▲目次へ戻る

 

3.コンストラクタの中の this

 
オブジェクトの他に、コンストラクタ内 でも this をよく使用します。

コンストラクタは new 演算子を使ってインスタンスを生成しますが、このインスタンスのプロパティを this で作成することができます。

次のように記述して、インスタンスのプロパティを this で作成します。

function Member( id, name ) {

    this.id = id;
    this.name = name;

}

var memb1 = new Member( "001", "青山" );

alert(memb1);
alert(memb1.name);

 
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。

  
 
  

 
上のサンプルは、コンストラクタ Member を作成して、その中に this を使ってインスタンスのプロパティを設定しています。

そして、新しくインスタンス memb1 を作成していますが、memb1 が示している object オブジェクトは、最初にプロパティを作成していた Member を示しています。

コンストラクタ内の this は、自身の コンストラクタ を示しているのと同時に インスタンスのプロパティでもあるという 少し複雑な関連性があります。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.