JavaScript【 this 】 ～ 独特なキーワード
JavaScriptの「 this 」は、コードのどこからでも使うことができる便利なキーワードですが、通常の変数等に比べて 明確なイメージを持つことが難しい面もあります。
今回は、JavaScript の「 this 」について紹介します。
１．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 オブジェクトと同じ扱いとなります。
▲目次へ戻る
２．オブジェクトの中の 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 の中身が変化します。
▲目次へ戻る
３．コンストラクタの中の 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 は、自身の コンストラクタ を示しているのと同時に インスタンスのプロパティでもあるという 少し複雑な関連性があります。
▲目次へ戻る
