JavaScript上級 #2 this バインディングと呼び出しパターン

function show() {
  console.log(this);
}

show();   // strict モード: undefined / 非 strict: globalThis (window)

const obj = {
  name: 'カーティス',
  greet() {
    console.log(this.name);
  },
};

obj.greet();   // 'カーティス'

const greet = obj.greet;
greet();   // undefined (またはグローバル)

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count++;
    console.log(this.count);
  }
}

const c = new Counter();
button.addEventListener('click', c.increment);
// ✗ click 時 this が button (または undefined)

// 1. アロー関数で包む
button.addEventListener('click', () => c.increment());

// 2. bind で固定
button.addEventListener('click', c.increment.bind(c));

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

greet.call({ name: 'カーティス' }, 'こんにちは');
// こんにちは, カーティス

greet.apply({ name: 'カーティス' }, ['こんにちは']);
// こんにちは, カーティス

const boundGreet = greet.bind({ name: 'カーティス' });
boundGreet('こんにちは');   // こんにちは, カーティス

boundGreet.call({ name: '別の人' }, 'こんにちは');
// こんにちは, カーティス  ← bind で固定した this が優先

function add(a, b) {
  return a + b;
}

const add5 = add.bind(null, 5);   // this は null, 第一引数は 5 で固定
add5(3);    // 8
add5(10);   // 15

function User(name) {
  this.name = name;
}

const u = new User('カーティス');
u.name;   // 'カーティス'

const obj = {
  name: 'カーティス',
  greetRegular: function() {
    console.log(this.name);
  },
  greetArrow: () => {
    console.log(this.name);   // 外側の this — 普通は undefined
  },
};

obj.greetRegular();   // 'カーティス'
obj.greetArrow();     // undefined (オブジェクトの外の this を見る)

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {                      // メソッド → 通常関数
    setTimeout(() => {                // コールバック → アロー
      this.count++;                   // 外側の this (Counter インスタンス) を保持
    }, 100);
  }
}

const arrow = () => this;
const bound = arrow.bind({ name: 'カーティス' });
bound();   // 依然として外側の this

const obj = {
  prefix: '> ',
  items: ['a', 'b', 'c'],
  log() {
    this.items.forEach(function(x) {
      console.log(this.prefix + x);   // ✗ this が obj ではない
    });
  },
};

log() {
  this.items.forEach((x) => {
    console.log(this.prefix + x);   // 外側の this を保持
  });
}

this.items.forEach(function(x) {
  console.log(this.prefix + x);
}, this);   // 第二引数が thisArg

button.addEventListener('click', function(e) {
  console.log(this);   // イベントが付けられた要素 (currentTarget)
});

button.addEventListener('click', (e) => {
  console.log(this);   // 外側 (普通は undefined または window)
});

function f() {
  console.log(this);   // window または global
}
f();

'use strict';
function f() {
  console.log(this);   // undefined
}
f();