thisの使い方/JavaScript

thisの動作

　thisは、呼び出し元のオブジェクトを示します。例えば、あるオブジェクトのメソッドとして呼び出した関数内で使うと、thisの中身はそのオブジェクトになります。

　次からは、thisの利用パターンをご紹介すると共に、メリット等について説明します。

オブジェクトのメソッドとして呼び出す

　オブジェクトのメソッドとして呼び出した場合のthis利用例です。

<script>
var yamada = {
    address: "Tokyo",
    display: function() {
        document.write("住所は" + this.address + "です。");
    }
};
yamada.display();
</script>

　青字部分でdisplayがyamadaオブジェクトのメソッドとして呼び出されています。このため、赤字のthisはyamadaオブジェクトを示します。従って、this.addressはyamada.addressを示す事になり、結果として「住所はTokyoです。」と表示されます。

　ハンドラ内でthisを使う場合も同様です。メソッドから呼び出されたハンドラ内のthisは、イベントが発生した要素オブジェクトを示します。

<p id="dom-test" style="border-style:solid;">これはテストです。</p>

<script>
function func1() {
    this.style.color = "red";
}

var x = document.getElementById("dom-test");
x.addEventListener("click", func1, false);
</script>

　赤字部分で要素オブジェクト.メソッドの形でハンドラfunc1が呼び出されています。このため、青字のthisはid:dom-testの要素オブジェクトを示します。従って、要素がクリックされると赤に変わります。実行例は、以下の通りです。

これはテストです。

　枠内をクリックすると、赤色に変わります。

コンストラクタとして呼び出す

　コンストラクタとして呼び出す場合のthis利用例です。

<script>
function Peaple(address) {
    this.address = address;
}

var yamada = new Peaple("Tokyo");
</script>

　青字部分で、Peapleがyamadaオブジェクトのコンストラクタとして呼び出されています。この時、赤字部分のthisはyamadaオブジェクトを示します。従って、this.addressは、yamada.addressプロパティを作成する事になります。

　尚、オブジェクトやコンストラクタについては、「オブジェクトの使い方」をご参照ください。

thisを使うメリット

　thisのメリットは、1つのthisで複数のオブジェクトを扱える事です。先程のハンドラ内でthisを使う場合ですが、複数の要素オブジェクトに対して使ってみます。

<p id="dom-test1" style="border-style:solid;">これはテストです。</p>
<p id="dom-test2" style="border-style:solid;">これはテストです。</p>

<script>
function func1() {
    this.style.color = "red";
}

var x = document.getElementById("dom-test1");
var y = document.getElementById("dom-test2");
x.addEventListener("click", func1, false);
y.addEventListener("click", func1, false);
</script>

　赤字から呼び出した時はthisがdom-test1の要素オブジェクト、青字から呼び出した時はthisがdom-test2の要素オブジェクトを示すため、それぞれの要素オブジェクトをクリックすると赤に変わります。つまり、不特定多数のオブジェクトから呼び出されても、そのオブジェクトに対して操作が可能です。

　もう1つの例です。

<script>
function Peaple(address) {
    this.address = address;
}

var yamada = new Peaple("Tokyo");
var suzuki = new Peaple("Kyoto");
</script>

　yamadaでもsuzukiでもコンストラクタを呼び出すと、thisはそれぞれのオブジェクトを示すため、1つのコンストラクタで複数のインスタンスが作成出来ます。

thisのデフォルト

　以下のように、関数外でthisを使ったとします。

<script>
var a = 1;
alert(this.a);
</script>

　上記の例は、alert(a);と記述したのと同じで1が表示されます。

　thisのデフォルトは、windowオブジェクトを示します。このため、this.aはwindows.aです。windowオブジェクトはブラウザで表示した時に最初から存在し、グローバルオブジェクトと呼ばれます。

　aは、windowオブジェクトのプロパティとして存在するグローバル変数です。従って、グローバル変数aはwindow.aとも書けます。つまり、this.aとグローバル変数aは同じ(window.a)です。

callとapplyの利用

　thisがオブジェクトを示すと言っても、以下はthis.addressがundefinedになります。

<script>
function display() {
        document.write("住所は" + this.address + "です。");
}

var yamada = {
    address: "Tokyo",
};
display();
</script>

　青字部分の関数がオブジェクトのメソッド等ではなく、直接実行されています。このため、thisがwindowオブジェクトを示し、赤字のthis.addressは、address変数と同じです。address変数は宣言されていないため、undefinedになります。

　このような時は、callメソッドを使います。

<script>
function display() {
        document.write("住所は" + this.address + "です。");
}

var yamada = {
    address: "Tokyo",
};
display.call(yamada);
</script>

　callメソッドを使うと、赤字部分のようにthisで示すオブジェクトを指定出来ます。青字のthisがyamadaオブジェクトを示す事になるため、this.addressはTokyoになります。

　callメソッドでは引数も渡せます。

<script>
function display(x,y) {
        document.write(x + this.address + y);
}

var yamada = {
    address: "Tokyo",
};
display.call(yamada,"住所は","です。");
</script>

　赤字部分で引数を渡し、青字部分で受け取っています。結果は、「住所はTokyoです。」と表示されます。

　applyメソッドを使うと、引数を配列で渡す事も出来ます。

<script>
function display(x,y) {
        document.write(x + this.address + y);
}

var yamada = {
    address: "Tokyo",
};
var z = ["住所は","です。"];
display.apply(yamada,z);
</script>

　赤字部分により配列で引数を渡し、青字部分で受け取っています。

　引数の数は、「関数の使い方」で説明したargumentsを利用して可変にする事も出来ます。

次のページ「クロージャ」