なぜ this は呼び方で変わるのか

this は、書いた場所ではなく呼ばれ方で決まるからです。

obj.method() と書けば this は obj になります。 関数を取り出して fn() と呼べば、obj はもうどこにもありません。 関数は自分がどこに書かれていたかを覚えていません。

const user = {
  name: 'あ',
  greet() {
    return this.name;
  },
};

console.log(user.greet());

const fn = user.greet;

console.log(fn());

const user = {
  name: 'あ',
  greet() {
    return this === globalThis;
  },
};

const fn = user.greet;

console.log(fn());

同じ関数です。 呼び方だけを変えたら、結果が変わりました。

何が渡されているのか

user.greet() という式は、2つのことを同時にしています。

1. user から greet という関数を取り出す
2. user を this として渡しながら呼ぶ

const fn = user.greet は1だけをします。user は捨てられます。 だから fn() には渡すものが無くなります。

「無い」ときに何になるか

ここが分かりにくいところです。モードによって違います。

'use strict';

const user = {
  name: 'あ',
  greet() {
    return this;
  },
};

const fn = user.greet;

console.log(fn());

'use strict';

const counter = {
  n: 0,
  addAll(list) {
    list.forEach(function (x) {
      this.n += x;
    });

    return this.n;
  },
};

try {
  counter.addAll([1, 2]);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}

渡すものが無いと、グローバルオブジェクトが入ります。 globalThis.name は無いので、最初の例では undefined が出ていました。

'use strict' を付けると、代わりに undefined が入ります。

const counter = {
  n: 0,
  addAll(list) {
    list.forEach((x) => {
      this.n += x;
    });

    return this.n;
  },
};

console.log(counter.addAll([1, 2]));

const user = {
  name: 'あ',
  arrow: () => typeof this,
  method() {
    return this.name;
  },
};

console.log(user.method());
console.log(user.arrow());

こちらのほうが親切です。 次に this.name を読もうとした時点で落ちるからです。

const user = { name: 'あ', greet() { return this.name; } };
const other = { name: 'い' };

console.log(user.greet.call(other));
console.log(user.greet.apply(other));

const bound = user.greet.bind(other);

console.log(bound());
console.log(bound.call(user));

const arrow = () => typeof this;

console.log(arrow.call({ name: 'い' }));

forEach() に渡した関数は、counter とは無関係に呼ばれます。 メソッドの中に書いてあっても、this は引き継がれません。

import / export のあるファイル（モジュール）は、書かなくても strict モードです。 実務では下の例外になるほうが普通です。

→ Cannot read properties of undefined

アロー関数だけが違う

アロー関数は、自分の this を持ちません。 呼ばれ方に関係なく、書かれた場所の this をそのまま使います。

function greet(user) {
  return user.name;
}

console.log(greet({ name: 'あ' }));

addAll が counter.addAll() として呼ばれているので、そこでの this は counter です。 アロー関数はそれをそのまま借ります。

「呼び方で決まる」という規則の唯一の例外がこれです。

だからメソッドには使わない

arrow が書かれているのはオブジェクトリテラルの中で、そこはまだ user の中ではありません。 借りてくるのは外側の this です。user にはなりません。

自分で渡す

call() / apply() / bind() で、this を指定できます。

bind() で作った関数は、あとから call() しても変わりません。 一度結んだら外れないので、コールバックとして渡すときに使えます。

よくある誤解

「メソッドの中に書けば this はそのオブジェクト」

違います。書いた場所は関係ありません。 上の forEach の例がそれで、メソッドの中に書いてあっても外れます。

「アロー関数は this を親から受け取る」

正確には、受け取っていません。そもそも持っていないので、 this と書かれたら外側のスコープを見に行くだけです。

だから call() で渡しても効きません。

{ name: 'い' } は無視されました。

「this を使わなければ安全」

そのとおりです。渡さなくて済む形にできるなら、そのほうが単純です。

引数で受け取れば、呼び方に左右されません。

自分で確かめる

上のコードは書き換えて実行できます。次を試すと違いが見えます。

1. 'use strict' の行を消すと、undefined が globalThis に変わる
2. forEach((x) => ...) を forEach(function (x) { ... }) に戻すと落ちる
3. bind(other) のあとに .call(user) しても変わらない

まとめ

• this は呼ばれた瞬間に決まる。書いた場所は関係ない
• obj.method() なら obj、取り出して fn() なら渡すものが無い
• 渡すものが無いとき、sloppy では globalThis、strict では undefined
• アロー関数は this を持たない。外側のものをそのまま使う
• メソッドはふつうの書き方、その中のコールバックはアロー関数

コールバックにアロー関数を渡す形は、非同期処理をまとめて走らせるときにもよく出ます。 → 複数の非同期処理を同時に走らせる