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

次からは、thisの利用パターンをご紹介すると共に、メリット等について説明します。
thisは一般的に関数内で使われ、関数の呼び出し方によって何を示すか変わってきます。
本項では、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のメリットは、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を使ったとします。
<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)です。
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を利用して可変にする事も出来ます。
次のページ「クロージャ」