JavaScript | 関数リテラル（通常の function 式）とアロー関数の this の違い

JavaScriptにおける function式（関数リテラル） と アロー関数 の最大の違いのひとつが this の扱い です。初心者向けに整理してみますね。

違いのまとめ

例1：オブジェクトのメソッド

let obj = {
  value: 42,
  normalFunc: function(){
    console.log(this.value);
  },
  arrowFunc: () => {
    console.log(this.value);
  }
};

obj.normalFunc(); // → 42
obj.arrowFunc();  // → undefined

let obj = {
  value: 42,
  normalFunc: function(){
    console.log(this.value);
  },
  arrowFunc: () => {
    console.log(this.value);
  }
};

obj.normalFunc(); // → 42
obj.arrowFunc();  // → undefined

• normalFunc（function式）は「呼び出したオブジェクト obj」が this になる
• arrowFunc は「定義された場所の this」を引き継ぐ → この場合はグローバルスコープの this（ブラウザなら window、strict modeなら undefined）

例2：setTimeout の中での this

function Timer(){
  this.seconds = 0;
  setInterval(function(){
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

new Timer(); // NaN, NaN, NaN...

function Timer(){
  this.seconds = 0;
  setInterval(function(){
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

new Timer(); // NaN, NaN, NaN...

• 通常の function 式では、setInterval 内の this は「グローバル」になってしまう

👉 アロー関数を使うと解決できます：

function Timer(){
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

new Timer(); // 1, 2, 3, ...

function Timer(){
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

new Timer(); // 1, 2, 3, ...

• アロー関数は「外側の this（= Timer インスタンス）」を引き継ぐので期待通り動く

✅ まとめ

• function式：呼び出し方で this が変わる（柔軟だが混乱しやすい）
• アロー関数：定義時の this を固定的に引き継ぐ（コールバックや非同期処理で便利）

💡 初心者へのアドバイス：

• オブジェクトのメソッド → function式を使う
• コールバックや非同期処理 → アロー関数を使う