class_promise_test.js

class Hoge {
  constructor() {
    this.text = 'text';
    this.b = this.b.bind(this);
  }

  a() {
    return new Promise(resolve => resolve(this.text));
  }

  b() {
    console.log('b() this');
    console.log(this);
    return new Promise(resolve => resolve(this.text));
  }

  c() {
    console.log('c() this');
    console.log(this);
    return new Promise(resolve => resolve('tmp'));
  }

  d() {
    console.log('d() this');
    console.log(this);
  }
}

const hoge = new Hoge;
const log  = text => console.log(`text: ${text}`);

hoge.a()
  .then(result => log(result)) // 1回目のthis参照は大丈夫
  .then(hoge.b)
  .then(result => log(result)) // constructorでbindした関数のthis参照は大丈夫
  .then(() => {
    console.log('Promise this');
    console.log(this); // 空っぽ
    return 'tmp';
  })
  .then(hoge.c)                           // 関数を渡すとthis参照が死ぬ
  .then(() => hoge.c())                   // 無名関数でラップするとthis参照は大丈夫(arrow function)
  .then(function () { return hoge.c(); }) // 無名関数でラップするとthis参照は大丈夫
  .then(() => hoge.d())                   // Promiseを返さない関数のthisは大丈夫
  .catch(err => console.error(err));

/**
 * 実行結果
text: text
b() this
Hoge { text: 'text', b: [Function: bound b] }
text: text
Promise this
{}
c() this
undefined
c() this
Hoge { text: 'text', b: [Function: bound b] }
c() this
Hoge { text: 'text', b: [Function: bound b] }
d() this
Hoge { text: 'text', b: [Function: bound b] }
*/