先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptの『this』ってよく聞きますけど、何のことかよくわかりません。教えてください！」

先生

「『this』はJavaScriptでとても大事なキーワードで、関数の中で『今使っているそのもの』を指すものなんです。」

生徒

「『今使っているそのもの』って、具体的にはどういうことですか？」

先生

「たとえば、自分がどの部屋にいるかを表す住所のようなものだと思ってください。場所によって『this』が指すものが変わるんですよ。」

生徒

「じゃあ、『this』はいつも同じものを指すわけじゃないんですね？」

先生

「その通り！『this』は関数がどのように呼ばれたかによって変わるんです。これを理解するとJavaScriptがもっと楽しくなりますよ！」

1. thisとは何か？

JavaScriptのthisは「この関数やメソッドが動いているときの対象」を指す特別なキーワードです。

英語の「this」は「これ」や「このもの」という意味で、プログラム内でも「今扱っているもの」を表します。

つまり、thisは関数やオブジェクトの文脈（呼び出し方）によって変わる、動的な「自分自身」のことです。

2. 関数内のthisの基本動作

まず、関数内でのthisの基本は「関数が呼ばれた方法によって変わる」ことです。

たとえば、グローバルな関数の場合、ブラウザではthisは「windowオブジェクト」を指します。


function showThis() {
  console.log(this);
}
showThis(); // window（ブラウザの場合）

このように、普通に関数を呼ぶとthisはグローバルなオブジェクトを指します。

3. オブジェクトのメソッド内でのthis

オブジェクトの中で関数（これをメソッドと呼びます）を使うと、thisはそのオブジェクトを指します。


const person = {
  name: "太郎",
  greet: function() {
    console.log(this.name + "さん、こんにちは！");
  }
};
person.greet(); // 太郎さん、こんにちは！

ここではthisがpersonオブジェクトを指しているので、this.nameはperson.nameと同じです。

4. thisが関数呼び出しで変わる理由

JavaScriptではthisは「関数がどのオブジェクトに属して呼ばれたか」で決まります。

だから、同じ関数でも呼び出し方によってthisの中身が変わることがあります。


const person = {
  name: "花子",
  greet: function() {
    console.log(this.name + "さん、こんにちは！");
  }
};

const greetFunc = person.greet;
greetFunc(); // undefinedさん、こんにちは！（またはwindow.nameの値）

この例では、greetFuncはただの関数なので、thisはグローバルオブジェクト（ブラウザではwindow）を指し、nameがないためundefinedになります。

5. thisを明示的に指定する方法

thisを自分で指定したいときは、callやapply、bindというメソッドを使います。

たとえば、callを使うと次のようになります。


function greet() {
  console.log(this.name + "さん、こんにちは！");
}

const person = { name: "次郎" };

greet.call(person); // 次郎さん、こんにちは！

この例では、greet関数をpersonオブジェクトのthisとして呼んでいます。

6. アロー関数とthisの違い

JavaScriptのアロー関数は普通の関数と違い、thisを自分で持ちません。

アロー関数内のthisは、外側の関数やオブジェクトのthisをそのまま使います。


const person = {
  name: "三郎",
  greet: () => {
    console.log(this.name); // undefined（グローバルのthis）
  }
};
person.greet();

このようにアロー関数ではthisが期待したオブジェクトを指さない場合があるので、注意が必要です。

7. まとめないけど最後にポイントだけ

thisは「関数が呼ばれた状況によって変わる特別なキーワード」
オブジェクトのメソッドではthisはそのオブジェクトを指す
ただの関数呼び出しではグローバルオブジェクトを指す（ブラウザならwindow）
callやapply、bindでthisを指定できる
アロー関数は自分のthisを持たず、外側のthisを使う

JavaScriptのthisは最初は難しく感じますが、たくさんコードを書いて慣れると自然に理解できるようになります！

JavaScriptのthisの動作を関数で理解しよう！