thisとcallback関数とbind・オブジェクトとarrow関数と・・・

首題の通りです。

thisとcallback関数とbind・オブジェクトとarrow関数の動作を検証するソースコードをここで紹介します。

実行してみましょう

jsFiddle（https://jsfiddle.net/ ）
JS Bin（https://jsbin.com/?html,js,output ）

検証用ソースコード

 prop = 'global'
     
    const obj = {
      prop: 'obj',
      hello() {
        console.log('hello ' + this.prop);
      },
      hello_arrow: () => {
      	console.log('hello ' + this.prop);
      },
/* ここから関数のメソッドについてメソッド内コールバック関数を検証する */
      hello1() {
      	setTimeout(()=>console.log('======hello1:======'), 3000);
      	setTimeout(obj.hello, 3000);
      },
      hello2() {
      	let _this = this;
      	setTimeout(()=>console.log('======hello2:======'), 3000);
      	setTimeout(_this.hello, 3000);
      },
      hello3() {
      	setTimeout(()=>console.log('======hello3:======'), 3000);
      	setTimeout(()=>this.hello(), 3000);
      },
      hello4() {
      	setTimeout(()=>console.log('======hello4:======'), 3000);
      	setTimeout(obj.hello.bind(this), 3000);
      },
      hello5() {
      	setTimeout(()=>console.log('======hello5:======'), 4000);
      	setTimeout(this.hello.bind(this), 4000);
      },
      hello6() {
      	setTimeout(()=>console.log('======hello6:======'), 4000);
      	setTimeout(this.hello, 4000);
      },
      hello7() {
      	setTimeout(()=>console.log('======hello7:======'), 5000);
      	setTimeout(function() {return obj.hello();}, 5000);
      },
      hello8() {
      	setTimeout(()=>console.log('======hello8:======'), 5000);
      	setTimeout(function() {return this.hello();}, 5000);
      },
      hello9() {
      	let _this = this;
      	setTimeout(()=>console.log('======hello9:======'), 5000);
      	setTimeout(function() {return _this.hello();}, 5000);
      },
/* ここからアロー関数のメソッドについてメソッド内コールバック関数を検証する */
      hello10() {
      	setTimeout(()=>console.log('======hello10:======'), 6000);
      	setTimeout(obj.hello_arrow, 6000);
      },
      hello11() {
      	let _this = this;
      	setTimeout(()=>console.log('======hello11:======'), 6000);
      	setTimeout(_this.hello_arrow, 6000);
      },
      hello12() {
      	setTimeout(()=>console.log('======hello12:======'), 6000);
      	setTimeout(()=>this.hello_arrow(), 6000);
      },
      hello13() {
      	setTimeout(()=>console.log('======hello13:======'), 6000);
      	setTimeout(obj.hello_arrow.bind(this), 6000);
      },
      hello14() {
      	setTimeout(()=>console.log('======hello14:======'), 7000);
      	setTimeout(this.hello_arrow.bind(this), 7000);
      },
      hello15() {
      	setTimeout(()=>console.log('======hello15:======'), 7000);
      	setTimeout(this.hello_arrow, 7000);
      },
      hello16() {
      	setTimeout(()=>console.log('======hello16:======'), 8000);
      	setTimeout(function() {return obj.hello_arrow();}, 8000);
      },
      hello17() {
      	setTimeout(()=>console.log('======hello17:======'), 8000);
      	setTimeout(function() {return this.hello_arrow();}, 8000);
      },
      hello18() {
      	let _this = this;
      	setTimeout(()=>console.log('======hello18:======'), 8000);
      	setTimeout(function() {return _this.hello_arrow();}, 8000);
      }
    }
     
    function func(callback) {
      return callback()
    }


/* 純粋にメソッドを実行する */
 console.log('======純粋なメソッドの実行======');
 console.log('======hello:======');
  	obj.hello();
 console.log('======hello_arrow:======');
    obj.hello_arrow();
/* 純粋にメソッドをコールバック関数にする */
 console.log('======純粋にメソッドをコールバック関数にする======');
// 関数のメソッド
 console.log('======関数のメソッド======');
 console.log('======func 1:======');
  func(obj.hello);
 console.log('======func 2:======');
  func(() => obj.hello());
 console.log('======func 3:======');
  func(function () {obj.hello()});
 console.log('======func 4:======');
  func(obj.hello.bind(obj));
// アロー関数のメソッド
 console.log('======アロー関数のメソッド======');
 console.log('======func 5:======');
  func(obj.hello_arrow);
 console.log('======func 6:======');
  func(() => obj.hello_arrow());
 console.log('======func 7:======');
  func(function () {obj.hello_arrow()});
 console.log('======func 8:======');
  func(obj.hello_arrow.bind(obj));
/* ここから関数のメソッドについてメソッド内におけるコールバック関数を検証する */
    setTimeout(console.log.bind(null, '======関数のメソッドについてメソッド内におけるコールバック関数を検証======'), 3000);
    obj.hello1();
    obj.hello2();
    obj.hello3();
    obj.hello4();
    obj.hello5();
    obj.hello6();
    obj.hello7();
    obj.hello8();
    obj.hello9();
/* ここからアロー関数のメソッドについてメソッド内におけるコールバック関数を検証する */
    setTimeout(console.log.bind(null, '======アロー関数のメソッドについてメソッド内におけるコールバック関数を検証======'), 6000);
    obj.hello10();
    obj.hello11();
    obj.hello12();
    obj.hello13();
    obj.hello14();
    obj.hello15();
    obj.hello16();
    obj.hello17();
    obj.hello18();

実行結果

"======純粋なメソッドの実行======"
"======hello:======"
"hello obj"
"======hello_arrow:======"
"hello global"
"======純粋にメソッドをコールバック関数にする======"
"======関数のメソッド======"
"======func 1:======"
"hello global"
"======func 2:======"
"hello obj"
"======func 3:======"
"hello obj"
"======func 4:======"
"hello obj"
"======アロー関数のメソッド======"
"======func 5:======"
"hello global"
"======func 6:======"
"hello global"
"======func 7:======"
"hello global"
"======func 8:======"
"hello global"
"======関数のメソッドについてメソッド内におけるコールバック関数を検証======"
"======hello1:======"
"hello global"
"======hello2:======"
"hello global"
"======hello3:======"
"hello obj"
"======hello4:======"
"hello obj"
"======hello5:======"
"hello obj"
"======hello6:======"
"hello global"
"======hello7:======"
"hello obj"
"======hello8:======"
"error"
"hello8/<@cufuqop.js:57:43
"
"======hello9:======"
"hello obj"
"======アロー関数のメソッドについてメソッド内におけるコールバック関数を検証======"
"======hello10:======"
"hello global"
"======hello11:======"
"hello global"
"======hello12:======"
"hello global"
"======hello13:======"
"hello global"
"======hello14:======"
"hello global"
"======hello15:======"
"hello global"
"======hello16:======"
"hello global"
"======hello17:======"
"error"
"hello17/<@cufuqop.js:96:43
"
"======hello18:======"
"hello global"

NOTE:
様々な記事や質問されている方のソースコードを参考にさせて頂きました！
お礼申し上げます。
ありがとうございます。

以上、