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

生徒

「JavaScriptのオブジェクトで、thisってよく見かけるんですが、これって何ですか？」

先生

「thisは『このオブジェクト自身を指す』ための特別なキーワードです。使い方をしっかり理解すれば、オブジェクトをもっと便利に扱えますよ。」

生徒

「初心者にはちょっと難しそうですが、どうやって使うんですか？」

先生

「大丈夫、ゆっくり順番に見ていきましょう！」

1. thisとは何か？

JavaScriptのthisは、「今実行している関数がどのオブジェクトに属しているか」を指します。オブジェクトの中で使えば、そのオブジェクト自身を表します。

イメージとしては、「自分自身を指さす矢印」のようなものです。

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

オブジェクトの中にある関数（メソッド）の中でthisを使うと、そのオブジェクトを指します。


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

ここでuser.greet()を実行すると、 thisがuserを指し、名前を使ってあいさつできます。


花子さん、こんにちは！

オブジェクトのプロパティを使って計算したり、別のメソッドを呼び出すときにthisが便利です。


const counter = {
  count: 0,
  increment() {
    this.count++;
  }
};
counter.increment();
console.log(counter.count); // 1

ここではthis.countを使うことで、自分のカウント値を増やしています。

注意したいのは、関数だけを取り出して呼ぶと、thisが期待したオブジェクトではなくundefinedになります。


const fn = user.greet;
fn(); // thisがuser以外を指してundefinedになる

このようなときは、.bind()やアロー関数で対応できます。

.bind()メソッドを使えば、関数の中でthisを指定したオブジェクトに固定できます。


const boundGreet = user.greet.bind(user);
boundGreet(); // userを指して正しくあいさつできる

アロー関数はthisを外側のスコープから引き継ぎます。オブジェクト内でアロー関数を使うとthisが別のオブジェクトを指すので、注意が必要です。


const obj = {
  value: 10,
  show: () => {
    console.log(this.value); // undefinedになる
  }
};
obj.show();

メソッドでは普通の関数を使いましょう。

初心者のうちは、まず「オブジェクトの中ではthis＝そのオブジェクト」と覚えておくと良いでしょう。