概要
JavaScriptにおける this の挙動は、実行時の呼び出し方によって決まるという点で、他言語とは一線を画す。
つまり this は、定義ではなく呼び出しによって決定される。
以下のような状況において、this の設計がバグの温床になる：
- コールバックで
thisが失われる - メソッドの
thisが意図しないオブジェクトになる -
bind()を忘れて関数が壊れる - アロー関数と通常関数が混在して挙動が読めない
この記事では、this の挙動を完全に制御するために、暗黙的・明示的・アロー関数の使い分け戦略を提示する。
thisの決定ルール
① new キーワードが使われている？ → thisは新しいインスタンス
② 明示的に bind/call/apply？ → thisは指定された値
③ オブジェクトからの呼び出し？ → thisはそのオブジェクト
④ アロー関数？ → 外側のthisを継承
⑤ 上記いずれもなし → thisはグローバル（strictなら undefined）
1. 暗黙的バインディング（呼び出し元に依存）
const user = {
name: 'Toto',
greet() {
return `Hello, ${this.name}`;
}
};
user.greet(); // Hello, Toto
→ this は user にバインドされる
❌ 呼び出し方が変わると this が消える
const fn = user.greet;
fn(); // ❌ undefined（または global の name）
2. 明示的バインディング：bind / call / apply
function greet() {
return `Hello, ${this.name}`;
}
const user = { name: 'Toto' };
greet.call(user); // Hello, Toto
greet.apply(user); // Hello, Toto
const bound = greet.bind(user);
bound(); // Hello, Toto
✅ 使い分け
| メソッド | 引数の渡し方 | 実行タイミング |
|---|---|---|
call |
値をカンマで並べて渡す | 即時 |
apply |
引数を配列で渡す | 即時 |
bind |
引数を保存して返す関数 | 遅延（再実行） |
3. アロー関数によるバインディングの固定
const obj = {
name: 'Toto',
greet: () => {
console.log(this.name);
}
};
obj.greet(); // ❌ undefined（thisはグローバル）
// 正しい使い方
class Button {
constructor(label) {
this.label = label;
this.onClick = () => {
console.log(this.label); // ✅ 常にインスタンスのthis
};
}
}
→ アロー関数は this を定義時に外側から自動的に継承する
this に関する典型的なバグ例
❌ setTimeoutで this が失われる
function Timer() {
this.seconds = 0;
setInterval(function () {
this.seconds++; // ❌ this はグローバル
}, 1000);
}
→ ✅ 解決策：アロー関数 or bind
setInterval(() => this.seconds++, 1000);
設計で選ぶ this バインディング戦略
| シーン | 推奨構文 | 理由 |
|---|---|---|
| コールバックでthis保持 | アロー関数 | スコープ継承で安全 |
| メソッド定義 | 通常関数（宣言/式） | 呼び出し元バインド |
| 再利用可能な関数 | bind | 明示的にバインド |
| setTimeout / setInterval での this | アロー関数 or bind | 暗黙バインディングは破綻する |
thisを完全に理解する一問一答
const obj = {
val: 42,
method() {
return this.val;
}
};
const f = obj.method;
f(); // ❌ undefined
obj.method(); // ✅ 42
f.call(obj); // ✅ 42
const b = obj.method.bind(obj);
b(); // ✅ 42
結語
JavaScriptの this は「文法的に定まるもの」ではなく、「設計的に定義するもの」である。
-
functionか=>かではなく、“どこで実行されるか”が重要 -
thisを失わない設計をすることは、“コードの一貫性”を保証するということ - 明示（bind）・継承（arrow）・委譲（call/apply）を意図的に選び分けることが重要
「なぜ this をこう扱ったのか」を説明できる設計者が、JavaScriptを制する。