this
中級読み方：ディス｜英語：this
実行中のコンテキスト（文脈）を指すキーワードで、呼び出し方によって参照先が変わるよ。
やさしい説明
thisは、「今いる場所（コンテキスト）」を指すキーワードです。呼び出し方によって参照先が変わるため、初心者がつまずきやすいポイントです。
オブジェクトのメソッド内では「そのオブジェクト自身」を指します。グローバルでは window を指します。アロー関数では外側の this を引き継ぎます。
初心者のうちは「アロー関数を使えばthisの問題はほぼ起きない」と覚えておけばOKです。
具体例・使い方
const user = {
name: "太郎",
greet() {
console.log(this.name); // "太郎"（userを指す）
}
};
user.greet(); // "太郎"
// アロー関数はthisを持たない（外側を引き継ぐ）
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
console.log(this); // window（外側のthis）
});thisの参照先の変わり方
- オブジェクトのメソッド — そのオブジェクト自身を指す（最もよく使うケース）
- グローバル / 通常の関数 — ブラウザでは
window、strict modeではundefined - アロー関数 — 自分自身の
thisを持たず、外側のスコープのthisを引き継ぐ - イベントリスナー（通常関数） — イベントが発生した要素（
e.currentTarget）を指す - クラスのメソッド — そのクラスのインスタンスを指す
アロー関数は this をバインドしないため、コールバックやイベントリスナーで外側の this（オブジェクトや親スコープ）を使いたいときに便利です。現代のJavaScriptでは アロー関数を優先 するとthis問題のほとんどを回避できます。
クラス内でのthis
class Timer {
constructor() {
this.count = 0;
}
// 通常のメソッド: thisはインスタンスを指す
start() {
// ❌ setTimeout内の通常関数ではthisが変わる
// setTimeout(function() { this.count++; }, 1000);
// ✅ アロー関数で外側のthis（インスタンス）を引き継ぐ
setTimeout(() => {
this.count++;
console.log(this.count);
}, 1000);
}
}
const timer = new Timer();
timer.start(); // 1（1秒後）いつ使う？
- オブジェクトのメソッドで自分自身のプロパティにアクセスするとき
- クラスのメソッド内で、インスタンスのプロパティや他のメソッドを呼ぶとき
- コンストラクタ内でプロパティを初期化するとき（
this.name = ...） - React のクラスコンポーネントのメソッド内（現在は関数コンポーネントが主流）
間違いやすいポイント
❌ イベントリスナーに通常関数を渡すとthisが変わる
オブジェクトのメソッドをそのままイベントリスナーに渡すと、this がそのオブジェクトではなくイベント発生元の要素に変わります。
const obj = {
name: "太郎",
handleClick() { console.log(this.name); }
};
// ❌ thisがbtnを指してしまい、nameはundefined
btn.addEventListener("click", obj.handleClick);
// ✅ アロー関数でラップしてobj自身を参照する
btn.addEventListener("click", () => obj.handleClick());
// ✅ または bind() でthisを固定する
btn.addEventListener("click", obj.handleClick.bind(obj));❌ アロー関数をオブジェクトのメソッドとして使うとthisがwindowになる
オブジェクトリテラル内でアロー関数を使うと、this はオブジェクトではなく外側（グローバル）を指します。オブジェクトのメソッドには通常の関数記法 method() {} を使いましょう。
// ❌ アロー関数ではthisがwindowを指す
const user = {
name: "太郎",
greet: () => console.log(this.name) // undefined
};
// ✅ 通常のメソッド記法を使う
const user2 = {
name: "太郎",
greet() { console.log(this.name); } // "太郎"
};よくある疑問
Q: thisが何を指すか分からないときは？
A: console.log(this) で確認しましょう。通常の関数ではthisは呼び出し元のオブジェクト、アロー関数では外側のthisを引き継ぎます。
Q: thisを固定するには？
A: bind(obj)で固定できます。const fn = obj.method.bind(obj); クラスのコンストラクタでthis.method = this.method.bind(this)とするパターンが多いです。
Q: アロー関数のthisは？
A: アロー関数は独自のthisを持たず、定義された場所のthisを引き継ぎます。イベントハンドラでthisを使いたいなら通常の関数を使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →