this
中級読み方：ディス｜英語：This
実行中のコンテキスト（文脈）を指すキーワードで、呼び出し方によって参照先が変わるよ。いつ使う？ クラスのメソッド内で自分のプロパティにアクセスするとき、イベントハンドラで対象要素を参照するときに使うよ。間違いやすいポイント: アロー関数ではthisが外側のスコープを指すよ。オブジェクトのメソッドをアロー関数で書くとthisがundefinedになることがあるから注意しよう。
やさしい説明
thisは、「今いる場所（コンテキスト）」を指すキーワードです。呼び出し方によって参照先が変わるため、初心者がつまずきやすいポイントです。
オブジェクトのメソッド内では「そのオブジェクト自身」を指します。グローバルでは window を指します。アロー関数では外側の this を引き継ぎます。
初心者のうちは「アロー関数を使えばthisの問題はほぼ起きない」と覚えておけばOKです。
具体例・使い方
const user = {
name: "太郎",
greet() {
console.log(this.name); // "太郎"（userを指す）
}
};
// アロー関数はthisを持たない（外側を引き継ぐ）
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
console.log(this); // window（外側のthis）
});いつ使う？
オブジェクトのメソッドで自分自身のプロパティにアクセスするとき、クラスのメソッド内で使います。React のクラスコンポーネントでも登場します。
間違いやすいポイント
❌ イベントリスナーでthisが変わる
const obj = {
name: "太郎",
handleClick() { console.log(this.name); }
};
// ❌ thisがbtnを指してしまう
btn.addEventListener("click", obj.handleClick);
// ✅ bindで固定するか、アロー関数を使う
btn.addEventListener("click", () => obj.handleClick());よくある疑問
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を使いたいなら通常の関数を使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →