JavaScriptの「 this 」は、コードのどこからでも使うことができる便利なキーワードですが、通常の変数等に比べて 明確なイメージを持つことが難しい面もあります。
今回は、JavaScript の「 this 」について紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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 オブジェクトと同じ扱いとなります。
先ほどは、何もないところに「 this 」を記述しましたが、今度はオブジェクトの中に「 this 」を記述してみます。
let obj = {
prp1 : this
}
alert(obj.prp1);
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。
上のサンプルは、新しいオブジェクト obj を作成して、その中のプロパティ prp1 に this の中身を代入しています。
アラートの表示内容は、先ほどの「 alert(this); 」と同じように windowオブジェクト となります。
次に、メソッドを作成して、その中に this を記述してみます。
let obj = {
disp : function() {
alert(this);
}
}
obj.disp();
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。
上のサンプルは、オブジェクト内に メソッド disp を作成して、その中に this を記述しています。
アラートの表示内容は、window オブジェクト ではなく、object オブジェクト となります。
これは、上のサンプル内で作成した オブジェクト obj を示しています。
このように、メソッドの 中 と 外 では、this の中身が変化します。
オブジェクトの他に、コンストラクタ内 でも this をよく使用します。
コンストラクタは new 演算子を使ってインスタンスを生成しますが、このインスタンスのプロパティを this で作成することができます。
次のように記述して、インスタンスのプロパティを this で作成します。
function Member( id, name ) {
this.id = id;
this.name = name;
}
let memb1 = new Member( "001", "青山" );
alert(memb1);
alert(memb1.name);
上記を実行すると、次のようになります。
ボタンをクリックしてみて下さい。
上のサンプルは、コンストラクタ Member を作成して、その中に this を使ってインスタンスのプロパティを設定しています。
そして、新しくインスタンス memb1 を作成していますが、memb1 が示している object オブジェクトは、最初にプロパティを作成していた Member を示しています。
コンストラクタ内の this は、自身の コンストラクタ を示しているのと同時に インスタンスのプロパティでもあるという 少し複雑な関連性があります。
INTERNOUS,inc. All rights reserved.