JSのthisとarrowの説明資料

obj.js

var user = { name: 'john' }
console.log(user)

user.hello = function () {
  // この this == user(レシーバー) になってほしい
  return "I am " + this.name + "!"
}

user.callback = function (cb) {
  console.log('exec callback')
  console.log(cb())
}

// => I am john!
console.log(user.hello())

var hello = user.hello;
// => I am undefined!
// レシーバがないので、this.name = undefinedになる
console.log(hello());

// => callback I am undefined!
// 実行時にはレシーバがなくなっちゃってるので、undefinedになってしまう
user.callback(user.hello)

// こうする
// => callback I am john!
user.callback(function(){ return user.hello() })

class User {
  constructor (name) {
    this.name = name;
  }

  // arrow Function で this を束縛できる
  hello = () => {
    return `I am ${this.name}!`;
  }
}

var user = new User('john');
// I am john!
console.log(user.hello())

var hello = user.hello
// I am john!
console.log(hello())