javascriptのthis

javascriptのthisは基本的にはレシーバを指す。
だから、メソッド呼び出しすればオブジェクト、関数呼び出しすればグローバルオブジェクトを指す。

問題はコールバック関数でthisを使った場合。

class Person {
  constructor() {
    this.name = 'taro';
  }

  hello1() {
    setTimeout(function () {
      console.log(`hello1 My name is ${this.name}`);
    },10);
  }

  hello2(){
    setTimeout(()=> {
      console.log(`hello2 My name is ${this.name}`);
    },10);
  }
}

asan = new Person;
asan.hello1();  //=>hello1 My name is undefined
asan.hello2(); //=>hello2 My name is taro


コールバック関数は呼び出し元に付け加える形で実行されるため、
レシーバがグローバルオブジェクトになってしまう。
(付け加える形で実行という表現は正しくない気がするけどイメージってことで)
var setTimeout = function (func,time) {
  hogehoge;
  func(); //ここにhello1が入って実行されるからレシーバがグローバルオブジェクトになる
}

アロー関数は宣言したときのthisを保持してくれる。
javasriptのthisをrubyでの＠(インスタンス変数)にしてくれるイメージ。
ということで基本的にアロー関数を使うようにしよう。