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

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

img_top_001

卒業生インタビュー

2019.07.02

【卒業生の声:直江さん】1年間のプログラミング独学後、沖縄から上京し、更にプログラマカレッジで学習。希望していた会社に内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アイティートゥモロー プログラマカレッジ卒業生の直江さんにお話しをお伺いしました! 目次 手を動かす仕事に就くという強い決意を持ち、会社を […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.