this キーワードとコンテキスト

// デフォルトバインディング
function showThis() {
  "use strict";
  console.log(this);
}
showThis(); // undefined（strict mode）

// 暗黙的バインディング
const user = {
  name: "太郎",
  greet() {
    console.log("こんにちは、" + this.name);
  }
};
user.greet(); // "こんにちは、太郎"

// new バインディング
function Person(name) {
  this.name = name;
}
const p = new Person("花子");
console.log(p.name); // "花子"

function introduce(greeting, punctuation) {
  return greeting + "、" + this.name + punctuation;
}

const person = { name: "田中" };

// call: 引数をカンマ区切りで渡す
console.log(introduce.call(person, "こんにちは", "！"));
// "こんにちは、田中！"

// apply: 引数を配列で渡す
console.log(introduce.apply(person, ["やあ", "。"]));
// "やあ、田中。"

// bind: this を固定した新しい関数を返す
const tanakaSays = introduce.bind(person);
console.log(tanakaSays("おはよう", "！"));
// "おはよう、田中！"

// メソッド借用
const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const arr = Array.prototype.slice.call(arrayLike);
console.log(arr); // ["a", "b", "c"]

// 部分適用
function multiply(a, b) {
  return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5));  // 10
console.log(double(10)); // 20

// 通常の関数: this はコールバック内で変わる
const timer1 = {
  seconds: 0,
  start() {
    const self = this; // this を退避
    setInterval(function() {
      self.seconds++; // self 経由でアクセス
    }, 1000);
  }
};

// アロー関数: レキシカル this でシンプルに書ける
const timer2 = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++; // アロー関数は外側の this を使う
    }, 1000);
  }
};

// 落とし穴1: メソッド抽出
const user = {
  name: "太郎",
  greet() {
    return "Hello, " + this.name;
  }
};

const greetFn = user.greet; // メソッドを変数に代入
// greetFn(); // this === undefined (strict mode)

// 解決策: bind で固定
const boundGreet = user.greet.bind(user);
console.log(boundGreet()); // "Hello, 太郎"

// 落とし穴2: setTimeout
const counter = {
  count: 0,
  start() {
    // NG: this が counter を指さない
    // setTimeout(this.increment, 1000);

    // OK: アロー関数で包む
    setTimeout(() => this.increment(), 1000);

    // OK: bind で固定
    // setTimeout(this.increment.bind(this), 1000);
  },
  increment() {
    this.count++;
    console.log(this.count);
  }
};

// 落とし穴3: クラスとイベントハンドラ
class Button {
  constructor(label) {
    this.label = label;
    this.count = 0;
  }

  // アロー関数でメソッドを定義すると this が固定される
  handleClick = () => {
    this.count++;
    console.log(`${this.label}: ${this.count}回クリック`);
  };
}

const btn = new Button("送信");
// イベントリスナに渡しても this が btn を指す
// document.querySelector("#btn").addEventListener("click", btn.handleClick);