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

▲目次へ戻る