JavaScriptの this は、初心者がつまずきやすい代表的なテーマです。ですが、最初に結論だけ押さえるとかなり理解しやすくなります。this は「この関数が、どの相手を主語にして呼ばれたか」を表すキーワード です。
難しく感じるのは、this の意味が固定ではなく、関数の呼び出し方によって変わるからです。この記事では、オブジェクトのメソッド、普通の関数、アロー関数の順に整理して解説します。
結論: this は呼び出し方で決まります
| 場面 | this が指すもの |
|---|---|
| オブジェクトのメソッドとして呼ぶ | そのオブジェクト |
| 普通の関数として呼ぶ | 環境によって異なる。strict mode やモジュールでは undefined になることが多い |
| アロー関数 | 自分の this を持たず、外側の this を使う |
まずはこの表だけ覚えておくと、細かい違いが見えてきたときにも迷いにくくなります。
1. オブジェクトのメソッドでは、そのオブジェクトを指します
いちばんわかりやすいのは、オブジェクトの中で使うパターンです。
const user = {
name: "田中",
greet: function() {
console.log(this.name);
}
};
user.greet(); // 田中
この場合、greet は user.greet() と呼ばれているので、this は user を指します。だから this.name は user.name と同じ意味になります。
初心者はここを基準にすると理解しやすいです。「オブジェクトのメソッドなら、そのオブジェクトが主語になる」 と覚えておきましょう。
2. 普通の関数として呼ぶと、思った相手を指さないことがあります
次に、オブジェクトと関係なく普通の関数として呼ぶケースです。
function showThis() {
console.log(this);
}
showThis();
このときの this は、環境によって結果が変わります。ブラウザの古い書き方では window になることもありますが、strict mode や JavaScript モジュールでは undefined になることが多いです。
初心者のうちは、「普通の関数では、自分が期待するオブジェクトを自動では指さない」 と理解しておくと安全です。
3. アロー関数は自分専用の this を持ちません
アロー関数は、普通の関数とここが大きく違います。アロー関数は自分の this を新しく作らず、外側にある this をそのまま使います。
const user = {
name: "田中",
greet: () => {
console.log(this.name);
}
};
user.greet();
このコードでは、greet を user.greet() と呼んでいても、アロー関数の this は user になりません。ここが初心者にとって大きな落とし穴です。
そのため、オブジェクトのメソッドを定義するときは、まず普通の function を使う と覚えるのがおすすめです。
4. this が役立つのは、同じオブジェクトの値をまとめて使いたいときです
this は、オブジェクトの中にある複数の値を使って処理したいときに便利です。
const cart = {
price: 3000,
taxRate: 0.1,
getTotal: function() {
return this.price * (1 + this.taxRate);
}
};
console.log(cart.getTotal()); // 3300
このように書くと、cart の中にある値をまとめて扱えます。オブジェクトを部品として扱う場面では、とてもよく使う考え方です。
5. よくあるつまずき
メソッドを変数に入れると this が変わることがあります
const user = {
name: "田中",
greet: function() {
console.log(this.name);
}
};
const sayHello = user.greet;
sayHello();
この場合、sayHello() はもう user.greet() ではありません。つまり、this は user を指さなくなります。
もし元のオブジェクトを保ったまま使いたいなら、bind を使う方法があります。
const sayHello = user.greet.bind(user); sayHello(); // 田中
オブジェクトのメソッドにアロー関数を使うと混乱しやすいです
アロー関数は便利ですが、メソッド定義では this の動きが初心者にとってわかりにくくなります。まずは普通の function を使うほうが安全です。
this は変数名ではありません
this は自分で好きな値を入れる変数ではなく、「誰を主語にするか」を表す特別なキーワードです。let や const のような変数宣言とは別の概念です。
関連して読みたい記事
まとめ
JavaScriptの this は、最初は抽象的に見えますが、「どう呼ばれたかで決まる」という軸を持てば整理しやすくなります。まずはオブジェクトのメソッドと普通の関数の違いから、落ち着いて確認していきましょう。